关于rem的使用方法

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。
简单来说rem就是在自适应屏幕下，用来改变字体大小的。
首先，浏览器的默认字体大小都是16px。
目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。
就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位(比如px)的声明。
如图所示

使用JS转换
引入原生js代码重置rem单位：

核心代码如下

(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);

此图片是iphone 5适配器下的效果图

此图片是iphone 6/7/8适配器下的效果图

如有建议，请联系小编。