屏幕自适应单位rem、vw转换（移动端适配）

1.使用rem的js代码解决适配问题

• 事实上 rem.js 是把屏幕等分成 10 份，每份为 1rem ， 1rem 对应的大小就是 rem基准值 ，rem.js做的就是把 rem基准值 给html的 font-size ，所以如果设备的 物理像素 宽为 640px，那么 1rem=640px/10=64px , html的 font-size为16px

• rem.js文件内容

/* rem.js文件内容 */
(function () {
    var html = document.documentElement;

    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
    }

    window.addEventListener('resize', onWindowResize);
    onWindowResize();
})();

2.只需要写入简单的单位转换函数即可

事例：

• px转rem

// 1rem = 75px
//  iPhone 6尺寸作为设计稿基准
$base: 75;
@function px2rem($px) {
    @return ($px / $base) * 1rem;
}

.wrap {
    width: px2rem(750);
    background: #EE0A3B;
}

• px转vw

$vm_base: 375; 
@function px2rem($px) {
     @return ($px / 375) * 100vw;
 }

.wrap {
    width: px2rem(750);
    background: #EE0A3B;
}
···