用Rem來無腦還原Web移動端自適應的頁面

用Rem來無腦還原Web移動端自適應的頁面:

代碼：

(function (win,doc){
    if (!win.addEventListener) return;
    var html=document.documentElement;
    function setFont()
    {var cliWidth=html.clientWidth;
        html.style.fontSize=100*(cliWidth/640)+'px';    
    }   
    win.addEventListener('resize',setFont,false)
    doc.addEventListener('DOMContentLoaded',setFont,false)
})(window,document);

解讀：

  首先，不去鳥不支持事件監聽的瀏覽器（IE六、七、8），固然不寫也能夠，由於對字號的自適應的需求都是移動端。
  當出現窗口大小改變的時候給window綁定一個監聽，運行一個叫setFont的函數；當頁面的Dom結構加載完也運行setFont（或者不監聽直接setFont()運行也能夠。）
  setFont函數用來獲取屏幕分辨率，而後按比例來設置html的字號。
  我這裏是以100px爲基礎來縮放。爲何是100px？待我細細說明：
咱們通常拿到手的設計稿都是640px的，咱們不以手機分辨率爲考量，若是單純1：1還原640px的頁面，那麼咱們的頁面根目錄的字號就是100px（100*（640/640）=100px），那麼那麼設計稿上選擇一個文案，而後PS告訴咱們字號是24px，那麼咱們就在頁面裏給這段文案設置成0.24rem,那麼640px的頁面上字體就是24px啦。
  而後當咱們考慮好比頁面是5/5s上看，那麼當前頁面字號就是50px（100*(320/640)=50px），那麼0.24rem會以12px的大小展現出來。而640px寬的設計稿上的24px的字體，在320px的頁面下，就是以12px顯示的~
  這就是爲何要以100px爲基礎字號，這樣頁面裏量的是24px的字體，我代碼裏寫0.24rem就會自動在頁面裏以12px顯示了~並且它能夠在6/6p上以13或者14px的樣式展現出來~
  那你說，我遇到了奇葩的750px爲分辨率的設計稿（好比是iphone6的），那你就把公式改爲 100*(cliWidth/750)+px就行（也就是設計稿是多寬，公式裏就寫多少）。而後設計稿裏量的Xpx大小，就寫多少0.Xrem~什麼分辨率的設計稿都不怕啦

tips：

  100px只是爲了讓我偷懶不用去換算字體大小的，若是喜歡能夠本身訂1000px，而後寫0.012rem這樣。可是不要寫像10px這樣的基礎字號，由於有些瀏覽器有最小字號的限制，好比設置了頁面基礎字號是10px，可是實際上最小隻認11px，那麼2rem的字體，自己是但願以20px顯示，可能最後是22px顯示的。