移动端适配

开发H5移动端时，需要注意适配问题，即满足不同手机屏幕大小，常见的移动端适配方案使用rem单位，它表示相对于根元素的font-size。核心思路是改变html的宽度，一般设置为视口宽度的十分之一，不考虑兼容性问题可以使用vw设置。使用www.caniuse.com查看兼容性情况。

1、使用vw

html{
    font-size:10vw;
}
body{
     font-size:16px;
}

2、不使用vw

(function (doc, win) {
    var docEl = doc.documentElement,
        // orientationchange 事件 用来监听手机屏幕的反转
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        psdWidth = 750,  // 设计图宽度
        recalc = function () { // 计算并设置html的宽度
            var clientWidth = docEl.clientWidth;// 获取当前屏幕的宽度
            if ( !clientWidth ) return;
            if ( clientWidth >= 640 ) {// 200只是转换规则的标准值,640是最大屏幕限制
                docEl.style.fontSize = 200 * ( 640 / psdWidth ) + 'px';
            } else {
                docEl.style.fontSize = 200 * ( clientWidth / psdWidth ) + 'px';
            }
        };

    if ( !doc.addEventListener ) return;
    // 绑定事件的时候最好配合防抖函数
    win.addEventListener( resizeEvt, debounce(recalc, 1000), false );
    doc.addEventListener( 'DOMContentLoaded', recalc, false );
    
    function debounce(func, wait) {
        var timeout;
        return function () {   
            clearTimeout(timeout)
            timeout = setTimeout(()=>{
                func.apply(this, arguments)
            }, wait);
        }
    }
})(document, window);

注意：代码中的200是一个自己决定的数字，是一个转换规则。设计稿的大小为750，使用时按照设计稿的尺寸除以100得到rem是多少。

vw兼容性情况