移动端rem布局

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第24天，点击查看活动详情

rem的概念

当在html文件里创建了一个块，给它设一个高度，宽度和背景颜色，当我们希望在移动端不同的设备宽度时，这个块可以等比放大和缩小

<div class="block"></div>

<style>
.block{
    width: 16px;
    height: 16px;
    background-color: pink;
}
</style>

就可以使用rem，rem是一个长度单位，也是一个相对长度的单位，相对于根元素html的font-size大小，常用于响应式布局

比如设置html的font-size为32px，将块的宽高改为1rem，可以看到最终计算出来的大小是32px，如果不设置font-size的大小，默认为16px

动态设置font-size

虽然使用了rem，但是在不同的设备宽度下依然没有实现等比的放大和缩小，因为font-size是固定的没有改变，无论是在哪种设备里1rem都是相对于根元素的所以不会等比放大缩小

所以我们要去动态设置font-size的大小，例如在iPhone 6设备下为16px，在更大的设备下font-size就越大，在更小的设备下font-size就更小

使用vw单位动态设置font-size大小

vw就是视口的宽度，不管在什么屏幕下， 屏幕都分为平均的100等份，1vw就等于1/100屏幕的宽度

以iPhone为例，100vw就相当于屏幕的宽度也就是是375px，那么在100px下为多少vw呢？100vw/375=100px下的vw/100，得到100px下的vw约为26.666vw，那么1rem就等于100px了，16px就等于0.16rem，我们将块的宽高设置为0.16rem

可以看到块的宽高在iPhone下最终计算出为16px，并且随着设备的不同实现了等比的放大和缩小

flexible.js

flexible.js是手机淘宝团队出的简洁高效移动端适配库，它的原理是把当前设备划分为一样的等分，但是不同设备下，比例还是一致的

打开这个js里面有一段代码，意思是1rem就是屏幕宽度/10

这里我将1rem设为屏幕宽度的24分之一，然后引入这个js文件，块的宽高还是1rem，还是以iPhone为例，宽度375/24等于15.625，可以看到在页面最终计算的大小一样（四舍五入保留两位小数为15.63了），也可以事先等比的放大和缩小

根据不同的px去计算rem有点麻烦，总不能每次都用计算器去将px转为对应的rem单位吧，如果是使用vscode编译器的可以安装一个Cssrem插件，再扩展设置里设定一个基准

当我们输入px单位的时候会自动帮我们计算并转换为rem单位，回车确定就行了