Rem及其使用

1、rem是什么

（font size of the root element）是指相对于根元素的字体大小的单位

2、兼容性

目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。即使浏览器不支持rem，就多写一个绝对单位的声明即可，浏览器会忽略用rem设定的字体大小。

3、62.5%的来源：

（1）首先浏览器的默认字体大小是16px

（2）100%=16px => 6.25%=1px => 62.5%=10px，因为rem是相对于根元素，因此在css的html中全局声明font-size=62.5%，此时的1rem就等于10px，这样一来rem和px之间的换算就比较简单，使用起来更方便

（3）使用JS根据浏览器宽度（或浏览器可视区域宽度（clienWidth））动态设置html的大小

$(function(){// 改变rem基准值（即设置html的大小）
    // 屏幕宽度 / 基准值 : 480px / 18px（自己设定的，480px是设计稿的宽度）
    var window_width = $(window).width();
    var rule_num = window_width * 18 / 480;
    if(window_width > 768){     //这里的判断根据项目实际情况而定
        $("html").css("font-size", 20 + "px");
    }else{
        $("html").css("font-size", rule_num + "px");
    }
})  

通过JS动态设置根元素的font-size，这样的好处是所有设备分辨率都能兼容适配，淘宝首页目前就是用的JS计算。如果不用JS也是可以做适配的，一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备，然后去针对这些设备去做media query设置也可以实现适配，如：

（4）使用媒体查询设置根元素大小——rem和px在响应式中的应用对比，如：

@media only screen and (min-width: 480px){
    html {
                font-size: 62.5% !important;  //代表1rem=10px
    }
    #example-rem{
        font-size: 3rem;
        color: #900
    }
    #example-px{
        font-size: 30px;
        color: #9c9
    }
}
@media only screen and (min-width: 768px){
    html {
        font-size: 125% !important;  //代表1rem=20px
    }
    #example-rem{
        font-size: 3rem;
        color: #f90
    }
    #example-px{
        font-size: 60px;
        color: #9c9
    }
}
@media only screen and (min-width: 1280px){
    html {
        font-size: 150% !important;  //代表1rem=25px
    }
    #example-rem{
        font-size: 3rem;
        color: #9cf
    }
    #example-px{
        font-size: 75px;
        color: #9c9
    }
}
@media only screen and (min-width: 1680px){
    html {
        font-size: 187.5% !important;  //代表1rem=30px
    }
    #example-rem{
        font-size: 3rem;
        color: #0c9
    }
    #example-px{
        font-size: 90px;
        color: #9c9
    }
}   
<div id="example-rem">字体大小（rem）</div>
<div id="example-px">字体大小（px）</div>

（5）Rem自适应JS，现在也有封装好的JS供我们直接使用

//designWidth：设计稿的实际宽度值，需要根据实际设置
//maxWidth：制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {
    var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);

（6）屏幕适配还有一种简单粗暴的做法，即设置viewport进行缩放
天猫web app的首页就采用过这种方式，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">