一看就懂得移動端rem佈局、rem如何換算

這裏使用了js控制根元素的font-size大小，而後進行rem換算，在js代碼後面會說明如下問題。

1.如何進行rem運算？

2.若是純js控制根元素用rem佈局會出現的小問題，如何解決？

3.若有欠缺的地方，大神們能夠指出錯誤或者改進。

function intiSize(){
    //獲取當前瀏覽器窗口寬度(這裏的實質就是body寬度)
    var win_w=document.body.offsetWidth;
    //定義變量
    var fontSize;
    if(win_w>640){
        fontSize=24;
    }else{
        //若是瀏覽器窗口寬度(這裏的實質就是body寬度)值小於320，取320
        win_w=Math.max(320,win_w);
        fontSize=win_w/320*12
    }
    //設置根元素的大小
    document.getElementsByTagName('html')[0].style.fontSize=fontSize+'px';
}
//瀏覽器窗口寬度發生變化時條用這個函數，方便與改變窗口大小時候調試
onresize=intiSize;
intiSize();

1.這段代碼是基於640px的設計稿，基於640設計說明（明白了640怎麼換算，720設計稿原理同樣，替換如下JS代碼裏面的數字或者用傳參的方式調用函數）

假設咱們拿到一張640的設計稿，有一個div寬度爲200px，高度100px；你在640的頁面去佈局時，由於根元素取24px，把width值轉換爲rem能夠直接用設計稿div的寬度除以24，200/24rem=8.33333333rem（固然是除不盡的，精確度建議保留8個小數點），而同理，高度height=100/24rem=4.16666667rem，這樣佈局能夠很精確還原設計稿，固然最後推薦使用計算器。

2.純js控制會一個頁面加載時候，知道加載完畢會出現由大變小的問題，這個是由於先加載頁面而後再加載js，當沒加載完這段js，函數沒被調用，會出現很大字體或者圖片很大，等JS加載完畢後，瞬間變回正常，這樣會影響用戶體驗，這裏有兩個解決方法，

1、像淘寶移動端那樣，頁面沒加載完畢前顯示一個loading頁面，加載完畢後再顯示內容。

2、把加入一個css媒體查詢樣式表，頁面先加載樣式再加載內容，用css樣式表去控制你的頁面佈局和js精確控制的佈局誤差儘可能下降到最小，這樣加載完時候由於微小誤差的還原到精確的佈局，這時候發生的變化很是微小（只有一個px左右的誤差）肉眼很難以看出（親測實用），下面我貼出平時實用的css樣式表，兩張混合實用，移動端佈局的問題得以完美的解決。

@charset "utf-8";
/* CSS Document */

/* ---------- Responsive accurate ---------- */
@media (min-width:640px){
    html{font-size:24px;}
    }
}
@media (min-width:631px) and (max-width:639px){html{font-size:23.66px;}}
@media (min-width:622px) and (max-width:630px){html{font-size:23.33px;}}
@media (min-width:613px) and (max-width:621px){html{font-size:23px;}}
@media (min-width:604px) and (max-width:612px){html{font-size:22.66px;}}
@media (min-width:595px) and (max-width:603px){html{font-size:22.33px;}}
@media (min-width:586px) and (max-width:594px){html{font-size:22px;}}
@media (min-width:577px) and (max-width:585px){html{font-size:21.66px;}}
@media (min-width:568px) and (max-width:576px){html{font-size:21.33px;}}
@media (min-width:559px) and (max-width:567px){html{font-size:21px;}}
@media (min-width:550px) and (max-width:558px){html{font-size:20.66px;}}
@media (min-width:541px) and (max-width:549px){html{font-size:20.33px;}}
@media (min-width:533px) and (max-width:540px){html{font-size:20px;}}
@media (min-width:524px) and (max-width:532px){html{font-size:19.66px;}}
@media (min-width:515px) and (max-width:523px){html{font-size:19.33px;}}
@media (min-width:506px) and (max-width:514px){html{font-size:19px;}}
@media (min-width:497px) and (max-width:505px){html{font-size:18.66px;}}
@media (min-width:488px) and (max-width:496px){html{font-size:18.33px;}}
@media (min-width:480px) and (max-width:487px){html{font-size:18px;}}
@media (min-width:471px) and (max-width:479px){html{font-size:17.66px;}}
@media (min-width:462px) and (max-width:470px){html{font-size:17.33px;}}
@media (min-width:453px) and (max-width:461px){html{font-size:17px;}}
@media (min-width:444px) and (max-width:452px){html{font-size:16.66px;}}
@media (min-width:435px) and (max-width:443px){html{font-size:16.33px;}}
@media (min-width:426px) and (max-width:434px){html{font-size:16px;}}
@media (min-width:417px) and (max-width:425px){html{font-size:15.66px;}}
@media (min-width:408px) and (max-width:416px){html{font-size:15.33px;}}
@media (min-width:400px) and (max-width:407px){html{font-size:15px;}}
@media (min-width:391px) and (max-width:399px){html{font-size:14.66px;}}
@media (min-width:382px) and (max-width:390px){html{font-size:14.33px;}}
@media (min-width:374px) and (max-width:381px){html{font-size:14px;}}
@media (min-width:365px) and (max-width:373px){html{font-size:13.66px;}}
@media (min-width:356px) and (max-width:364px){html{font-size:13.33px;}}
@media (min-width:347px) and (max-width:355px){html{font-size:13px;}}
@media (min-width:338px) and (max-width:346px){html{font-size:12.66px;}}
@media (min-width:329px) and (max-width:337px){html{font-size:12.44px;}}
@media (max-width:328px){html{font-size:12px;}}

3.若是有更加多好的想法和建議，留下你的評論，讓更加多人看到移動端佈局應該怎麼去改進，指出不足之處，我會加以改進並說明~

4.最後：或者這裏換算有些麻煩，要用計算機器去計算，固然，當你掌握了這種佈局方式，移動佈局會用的很爽！