1.使用rem的js代碼解決適配問題

• 事實上 rem.js 是把屏幕等分成 10 份，每份為 1rem ， 1rem 對應(yīng)的大小就是 rem基準值 ，rem.js做的就是把 rem基準值 給html的 font-size ，所以如果設(shè)備的 物理像素 寬為 640px，那么 1rem=640px/10=64px , html的 font-size為16px

• rem.js文件內(nèi)容

/* rem.js文件內(nèi)容 */
(function () {
    var html = document.documentElement;

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

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

2.只需要寫入簡單的單位轉(zhuǎn)換函數(shù)即可

事例：

• px轉(zhuǎn)rem

// 1rem = 75px
//  iPhone 6尺寸作為設(shè)計稿基準
$base: 75;
@function px2rem($px) {
    @return ($px / $base) * 1rem;
}

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

• px轉(zhuǎn)vw

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

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