移动端页面常用单位

我们在做页面的时候到底该使用多大的尺寸呢，如果我们按照640px的页面去做了一版页面，那是不是还需要做一版750px的页面呢，很显然是不用的，我们只需要使用移动端页面布局的单位，结合viewport来进行页面重构就可以了，那么我们先来了解一下移动端页面布局中常用的有哪些单位

　　在我们的移动端页面布局中，比较常用的单位有em，rem，%，vw和vh，等，这些单位都有一个共同点，他们都是一个相对单位，是可以根据页面的viewport的变化，进行实时改变。

　　我们简单介绍一下：em的值，根据父元素的font-size进行计算;rem是根据跟元素的font-size进行计算;% 根据父元素的尺寸进行计算;vw和vh分别根据viewport的宽度和高度进行计算，100vw或vh，等于viewport的宽度或高度。

　　这里我们以rem为例：

　　假定有一个设计稿的宽度为750px，如果我们则将整个图分成100份来看。那么，我们现在就让根部元素的font-size为75px，设置为：

　　html{

　　font-size: 75px;

　　}

　　那么，我们现在就可以比对设计稿，比如设计稿中，有一个div元素，宽度，高度都为75px，那么我们可以写成：

　　div{

　　height: 1rem;

　　width: 1rem;

　　}

可能看到这里，一些人还是不明白怎么用rem做到适配不同的分辨率，那么我们继续，现在，我们换了一个宽度为640px的手机

那么这个时候，我们的rem单位就起到作用了。

　　因为我们的rem全是根据html的font-size来改变的，所以说，这个时候，我们只需要把html下的font-size改成64px。我们之前的div，因为是根据html下的font-size动态变化的，那么。此时也就变成了宽度和高度都为64px的东西了。这样，就可以做到适配不同的屏幕分辨率了。(其实就是个等比缩放)

　　那么总结一下，我们的解决方案，其实就是 设计稿的宽度像素/html的font-size = 1rem的值。

　　当然我们需要动态的对html的font-size进行改变，就需要通过JS来进行操作。

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知