一看就懂得移動端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加載完畢后，瞬間變回正常，這樣會影響用戶體驗，這里有兩個解決方法，

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

二、把加入一個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.最后：或者這里換算有些麻煩，要用計算機器去計算，當然，當你掌握了這種布局方式，移動布局會用的很爽！

 原：http://www.cnblogs.com/linxianzuo/p/6056078.html