rem 适配方案

首先我们要明白，为什么要用rem单位呢，常用的px不好吗？原因是如果我们用px作为长度大小单位的话，就无法根据屏幕大小变化实时改变页面元素的大小，反之，rem就可以做到实时适配。

其次，我们也要清楚以rem为单位的元素大小是根据css html根标签下的文字大小(fontsize)来改变的。

在实际开发中，我们常见的设计稿尺寸有以下几个：

实现不同屏幕大小等比例适配的方法：

第一步、我们先用媒体查询做出判断，当屏幕大小为多少尺寸的时候，作出不同的适配

第二步、我们需要把设计稿上的宽度平均划分成15等份(份额不一定是15，也可以是20份，也可以是10份)，每一份的数值就是html根标签的字体大小(fontsize)，假设设计稿宽度是750px的话，平分成15等份，则html跟标签的字体大小为(750/15)px。

第三步、当我们得到html根标签中的字体大小(fontsize)之后，我们就可以用设计稿中元素的大小除以html字体大小，得到的值加上rem单位就根据屏幕大小变化做出适配了。

    @media screen and (min-width: 320px) {
        html {
            font-size: 21.3px; /*当前屏幕尺寸除以划分的等份:320/15*/
        }
    }

    @media screen and (min-width: 750px) {
        html {
            font-size: 50px; /*当前屏幕尺寸除以划分的等份:720/15*/
        }
    }

    div {
        width: 2rem; /*以设计稿宽度为750px为例，假设设计稿div宽度为100px，设计稿div宽度除以html  字体大小*/
        height: 2rem;
        background-color: pink;
    }

---

rem适配方案2(flexible.js)：

github地址：https://github.com/amfe/lib-flexible

在没有flexible的时候，我们需要写很多的媒体查询来适配各种屏幕的宽度，但我们有了flexible.js之后，就不需要写媒体查询了，并且flexible内部会自动获取到屏幕的宽度，并平均分成10等份。

px转rem插件(我们只用计算好当前html标签下fontsize的值，就可以直接在css元素大小上输入px，这个插件就能自动帮我们转成rem单位):“px run Rem”。

总结：我们使用flexible匹配不同屏幕大小的，再用px  run Rem插件自动将px单位转化成rem单位，我们唯一需要做的就是将设计稿宽度除以10，并把这个值设置为px run Rem的root fontsize就可以了。