移动端适配方案（rem）

适配原理：通过 js 动态设置 html 的 font-size

移动端适配方案（rem）

1.设置 meta viewport 属性

  
        "viewport" 
        content=
        "width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" 
        />

2.添加动态设置 html 的 font-size 的 js

  
        (
        function
        (designWidth, maxWidth) {
       
        var 
        doc = document,
       
        win = window,
       
        docEl = doc.documentElement,
       
        remStyle = document.createElement(
        "style"
        ),
       
        tid;
       
        function 
        refreshRem() {
       
        var 
        width = docEl.getBoundingClientRect().width;
       
        maxWidth = maxWidth || 750;
       
        width > maxWidth && (width = maxWidth); 
        //设置最大宽度
       
        width < 375 && (width = 375); 
        //设置最小宽度
       
        var 
        rem = width * 100 / designWidth;
       
        remStyle.innerHTML = 
        'html{font-size:' 
        + rem + 
        'px;}'
        ;
       
        }
       
        if 
        (docEl.firstElementChild) {
       
        docEl.firstElementChild.appendChild(remStyle);
       
        } 
        else 
        {
       
        var 
        wrap = doc.createElement(
        "div"
        );
       
        wrap.appendChild(remStyle);
       
        doc.write(wrap.innerHTML);
       
        wrap = 
        null
        ;
       
        }
       
        //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
       
        refreshRem();
       
        win.addEventListener(
        "resize"
        , 
        function
        () {
       
        clearTimeout(tid); 
        //防止执行两次
       
        tid = setTimeout(refreshRem, 300);
       
        }, 
        false
        );
       
        win.addEventListener(
        "pageshow"
        , 
        function
        (e) {
       
        if 
        (e.persisted) { 
        // 浏览器后退的时候重新计算
       
        clearTimeout(tid);
       
        tid = setTimeout(refreshRem, 300);
       
        }
       
        }, 
        false
        );
       
        if 
        (doc.readyState === 
        "complete"
        ) {
       
        doc.body.style.fontSize = 
        "16px"
        ;
       
        } 
        else 
        {
       
        doc.addEventListener(
        "DOMContentLoaded"
        , 
        function
        (e) {
       
        doc.body.style.fontSize = 
        "16px"
        ;
       
        }, 
        false
        );
       
        }
       
        })(750, 750);