移动端的两种布局怎么实施，元素像素单位如何换为rem

发布时间：2023-10-21 15:20:18 所属栏目：语言来源：

导读：动态rem

1. 首先我们先介绍当下的长度单位

px 像素

em 一个M的宽度 / 一个汉字的宽度 1em == 自身的 font-size

rem 全称 root em 是根元素（html)的 font-size

vh 全称 viewport height 100vh =

动态rem

1. 首先我们先介绍当下的长度单位

px 像素

em 一个M的宽度 / 一个汉字的宽度 1em == 自身的 font-size

rem 全称 root em 是根元素（html)的 font-size

vh 全称 viewport height 100vh == 视口高度

vw 全程 viewport width 100vw == 视口宽度

因为网页的默认font-size： 16px 所以1rem默认是 16px chrome 的最小字体像素默认是 12px

一个元素在没有设置font-size的情况下会去继承父元素的font-size

2. 移动端的布局

移动端的布局一般就两种

一是整体缩放

二是百分比布局

先说整体缩放

整体缩放，其实就是将pc端的网页缩小到手机端屏幕能看到网页全貌的大小

苹果手机刚出来时就是使用这种布局，苹果公司研究发现世界上大多数的网页宽度是980px，然而苹果手机的宽度像素是320px，所以苹果手机的浏览器用320像素的屏幕宽度去模拟980px的宽度，实现了整体缩放

为了看到效果，要将 <meta name="viewport"> 这一部分删除

<style>

        div{

            width:980px;

            margin:0 auto;

            background:#f0f0f0;

        }

        ul{

            list-style:none;

        }

        li{

            float:left;

            margin-left:10px;

        }

        clearfix::after{

            content:"";

            display:block;

            clear:both;

        }

    </style>

</head>

<body>

    <div>

        <ul>

            <li>选项1</li>

            <li>选项2</li>

            <li>选项3</li>

            <li>选项4</li>

            <li>选项5</li>

            <li>选项6</li>

        </ul>

    </div>

</body>

但这种整体缩放的用户体验并不好，所以pass，我们来讲百分比布局

百分比布局

//百分比布局

<style>

        .child{

            background-color:#ccc;

            text-align:center;

            width:40%;

            margin:10px 5%;

            float:left;

        }

        .clearfix::after{

            content:"";

            display:block;

            clear:both;

        }

    </style>

</head>

<body>

    <div class="parent clearfix">

        <div class="child">选项1</div>

        <div class="child">选项2</div>

        <div class="child">选项3</div>

        <div class="child">选项4</div>

    </div>

</body>

可以看到百分比布局能自动适应屏幕宽度。

但是百分比布局有个缺点，宽度和高度不能做任何关联

宽度一直变长，然而高度没有变化

为了让选项方块的高度是宽度的一半，实现该效果我们需要知道屏幕的宽度，再来确定选项的宽度和高度

这里可以使用vw，但vw的兼容性比较差，我们可以使用rem来代替vw

首先rem是以html的font-size为基准的，所以我们可以让html的font-size==pageWidth

<script>

let pageWidth = window.innerWidth;

    document.write('<style>html{font-size:'+ pageWidth/10 +'px}</style>')

</script>

为了更好的使用rem,这里1rem等于屏幕宽度的10分之1。注意不能做到1rem==屏幕的百分之1。因为浏览器的最小 font-size是12px ;

按如上改动代码

<style>

.child{

            background-color:#ccc;

            text-align:center;

            width:4rem;

            height:2rem;

            margin:10px 0.05rem;

            float:left;

            line-height:2rem;

        }

        .clearfix::after{

            content:"";

            display:block;

            clear:both;

        }

</style>

</head>

<body>

    <div class="parent clearfix">

        <div class="child">选项1</div>

        <div class="child">选项2</div>

        <div class="child">选项3</div>

        <div class="child">选项4</div>

    </div>

</body>

可以看到宽度和高度都能按百分比变化了，但是我们会发现一个很麻烦的东西，设计师给我们的设计稿，我们却必须把每个元素的像素单位换算为rem。这里我们就要scss来换算px了

3.scss动态换算px

@function pxToRem($px){

    @return $px/$designWidth*10+rem;//10是把整个屏幕分为10rem

}

$designWidth:320;//设计稿宽度

.child{

    background-color:#ccc;

    text-align:center;

    width:pxToRem(128);//4rem;

    height:pxToRem(64);//2rem;

    margin: 10px pxToRem(1.6);

    float:left;

    line-height:pxToRem(64);

}

.clearfix::after{

    content:"";

    display:block;

    clear:both;

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!