rem是什么？如何使用呢？_select 字体大小为什么是rem-优快云博客

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。

首先，浏览器的默认字体大小都是16px。

然后，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。

就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位(比如px)的声明。

为什么要用rem

首先我们要了解移动端最麻烦的是什么？

不同分辨率的适配

具体来说，有的屏幕宽750px，有的屏幕宽640px，有的甚至更宽，如果你写固定px，那么要么小的放不满，要么大的有大片留白。

怎么办？

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

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

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

简单来说：
rem 就是指屏幕宽度的百分之几；
或者说，n个rem = 用户可视区域的100%  ；

那么怎么使用rem呢
首先使用JS转换
引入以下原生js代码重置rem单位：
我用的是750px举的例子

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=750){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            };
 
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

然后我们在css中使用rem作为单位就可以了（替换"px"），注意单位的换算

如有问题请联系小编！