移动端适配

移动端适配

1、html

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

2、适配JS

(function (doc, win) {
    let docEl = win.document.documentElement;
    let resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';

    /**
     * 设置根元素font-size
     * 当设计稿宽度为750px的时候，根元素font-size:100px;
     */
    function refreshRem() {
        let clientWidth = doc.documentElement.clientWidth || doc.body.clientWidth;

        if (!clientWidth) {
            return;
        }

        docEl.style.fontSize = 100 * clientWidth / 750 + 'px';
    }

    refreshRem();

    if (!doc.addEventListener) {
        return;
    }

    win.addEventListener(resizeEvent, refreshRem, false);
    doc.addEventListener('DOMContentLoaded', refreshRem, false);
})(document, window);