移动端适配：rem 和 vw 方案

[NoName4Me]

rem 方案

无它，根元素的字体大小（根元素字体大小为 1rem）。

设置 rem 与设计稿 px 的换算比例：1 rem = 100 px，这样设计稿上的 1px 就可以写成 0.01 rem了。

(function (DOC, WIN) {
    const DESIGN_WIDTH = 750, // 根据设计稿宽度来
        BASE_FONT_SIZE = 100; // 1 rem = 100 px
    let docEl = DOC.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        function setFontSize() {
            let clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= DESIGN_WIDTH) { // 超过了设计稿宽度，强制以设计稿来做等比缩放
                docEl.style.fontSize = BASE_FONT_SIZE + 'px';
            } else {
                docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / DESIGN_WIDTH) + 'px';
            }
        }

    if (!doc.addEventListener) return;
    WIN.addEventListener(resizeEvt, setFontSize, false);
    DOC.addEventListener('DOMContentLoaded', setFontSize, false);
})(document, window);

但是，字体一般还是保持固定大小，不缩放，所以一般使用媒体查询，比如：

@media screen and (max-width: 321px) {
    body {
        font-size:16px
    }
}

@media screen and (min-width: 321px) and (max-width:400px) {
    body {
        font-size:17px
    }
}

@media screen and (min-width: 400px) {
    body {
        font-size:19px
    }
}

vw 方案

比较复杂，见：https://www.w3cplus.com/mobile/vw-layout-in-vue.html