3分钟读懂移动端rem使用方法

为什么要用rem

博客很久没写了，原因很简单。

最近接手了一个项目，要同时做PC和移动端的页面，之前没接触过，但毕竟给钱的是大爷，所以还是硬着头皮上了。

移动端最麻烦的是什么？

不同分辨率适配！

具体来说，有的屏幕320px宽，有的屏幕640px宽，有的更宽，如果你写固定px，那么要么小的放不下，要么大的有大片空白。

怎么办？

如果元素固定占用屏幕空间（一般是指宽度而非高度，下同）的百分之xx就ok了。

比如320px的10%是32px，640px的10%是64px，

如果10个10%宽度的元素放在一起，那肯定就是100%，即挤满屏幕（宽度），不会超出，也不会留白。

简单理解：

rem 就是指屏幕宽度的百分之x；

或者说，n个rem = 用户可视区域100%宽度

注意，之所以不说高度，是因为宽度（x轴）满了后，y轴（高度）方向的内容可以通过滚动屏幕来查看

rem介绍

在介绍rem之前先介绍em，em是父元素的字体大小，比如一个子盒子的宽度为2em，而且父盒子的font-size是15px，则该子盒子的宽度是2em=15px*2=30px；

而rem则是html标签中设置的字体大小，比如该页面中：

html{
    font-size:15px;
}

此时若在该页面任意位置写大小3rem则代表3*15px=45px；
相比em，rem在整个页面中html的文字大小只有一个font-size能够做到大小一致

上实例：

1、设计师给一个640px宽度的设计图

2、我们假定将页面分为64份。则64rem=100%宽度=640px，那么1rem=10px；那么html的font-size也为10px

3、你照着写出了静态页面，然后按照1rem=10px的比例，将设计图上的元素的大小，全部用rem写下；

4、完美，你写的静态页面在640px宽度的页面上正常展示了；

5、假如A用户使用的是320px宽度的手机，依旧把页面分为64份。那么64*1rem=100%宽度=320px。则1rem等于5px；那么html的font-size也为5px。则实现了同比例放大

rem怎么用？

rem是css单位；

1rem的大小是通过html下的font-size这个css属性告诉浏览器的；

使用替换px所在的位置即可

假定你预设在设计稿的时候 1rem = 10px;

然后一个元素（class=”ele”）的宽度是20px，高度30px（设计稿），

那么你的css这么写就可以了；

html {
    font-size: 10px;
}

.ele {
    width: 2rem;
    height 3rem;
}

 在任何分辨率下都适用

发现问题在哪里了么？如何确认1rem等于多少px？

原因是rem是css中使用的单位，css是不会帮你计算1rem是多少px的，只能通过你自己来计算。

计算方式很简单，简单来说：

1、你有一个设计稿A（假定640px），有一个预设的rem和px的比例B（假如是1rem = 10px）

2、获取用户浏览器的可视区域的宽度C（假如是320px），那么他此时1rem的尺寸D 可以根据 B/A = D/C 这个公式得知

3、原因是你假定屏幕可以容纳多少个rem，这是一个固定比例（如这里就是64rem）

B/A = D/C 

10px/640px=rem/320px

1rem=(10px/640px)*320px=5px

1rem=(10px/640px)*320px=5px

1rem=10px*(320px/640px)=5px

其他

1、用户加载完后，你就得设置好1rem的尺寸吧（记得是设置在html元素下的font-size）；

2、假如用户屏幕的尺寸会变，你肯定得考虑吧（刷新1）；

3、你懒得去找相应的代码，我总得给你吧（如下）；

var fun = function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;

            //这里是假设在640px宽度设计稿的情况下，1rem = 20px；
            //可以根据实际需要修改
            docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);