rem适配移动端

一、屏幕宽度 / 设计稿宽度 *100 来设置根元素的 font-size   10px = 0.10rem

(function (doc, win) {

    var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function () {

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;

            if(clientWidth>=){

                docEl.style.fontSize = '100px';

            }else{

                docEl.style.fontSize =  * (clientWidth / ) + 'px';

            }

        };

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

二、

const MAX_FONT_SIZE = ;

document.addEventListener('DOMContentLoaded', () => {

    const html = document.querySelector('html');

    let fontSize = window.innerWidth / ;

    fontSize  = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize;

    html.style.fontSize = fontSize + 'px';

});

// 以 Iphone 6、6s、7、8 为设计基础。

// 定义预计根元素 fontSize。

$rootFontSize:  / ;

// 定义像素转化为 rem 函数

@function px2rem ($px) {

    @return $px / $rootFontSize + rem;

}

三、一套视觉稿适配所有移动设备的js框架：pageresponse

　　GitHub：https://github.com/peunzhang/pageResponse

• 用transform:scale缩放页面，要求视觉稿高清
• 页面以px为单位即可让h5适配各种移动设备，适配原则根据视觉稿比例缩放页面