rem js相關

!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>720&&(n=720);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

規則就是，調用函數，放兩個參數，第一個參數，是設計稿的寬度，第二個參數是px與rem的轉換比例，通常會寫100（因為好算）；當然了，要把這段js代碼最好封裝在一個單獨的js文件里，並且放在所有的css文件引入之前載入。

其中 var n=t.clientWidth||320;n>720&&(n=720);

的意思是:如果clientWidth的值獲取不到,n就等於320,如果n>720成立就會執行n=720的操作

M && N中，若M為假，則N不被執行；

M｜｜N中，若M為真，則N不被執行。

上面這段js手機上在有表單的時候,在輸入法彈出的時候會失靈

代碼一

(function(win) {
                            if(!win.addEventListener) return;
                            var html = document.documentElement;
            
                            function setFont() {
                                function setRem() {
                                    var cliWidth = html.clientWidth;
                                    var w = document.documentElement.clientWidth,
                                        h = document.documentElement.clientHeight;
                                    var val = 640;
                                    
                                    if(w >=640){
                                        cliWidth = 640;
                                    }
            //                        if(w > h) {
            //                            //橫屏
            //                            val = 1334;
            //                        }
                                    html.style.fontSize = 100 * (cliWidth / val) + 'px';
                                }
                                setRem();
                                setTimeout(function() {
                                    setRem();
                                }, 300);
            
                            }
                            win.addEventListener('resize', setFont, false);
                            setFont();
                        })(window);

代碼二   

//屏幕適應

        (function (win, doc) {

            if (!win.addEventListener) return;

            var html = document.documentElement;

            function setFont() {

                var html = document.documentElement;

                var cliWidth = html.clientWidth;

                var k = 640;

                if (cliWidth >= 640){

                  cliWidth = 640;

                }

               

                html.style.fontSize = cliWidth / k * 100 + "px";

            }

            setFont();

            setTimeout(function () {

                setFont();

            }, 300);

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

            win.addEventListener('resize', setFont, false);

            win.addEventListener('load', setFont, false);

        })(window, document);