標籤：
移動端適配方案，說多也很多。可以使用百分比布局，但百分比與em都是基於父元素進行計算的，在實際應用中不是很方便。使用rem不僅可以設定字型大小，塊大小也可以設定。而且可以良好的適配各種終端，所以這方案很受歡迎。
rem定義及瀏覽器支援情況
rem（font size of the root element）是指相對於根項目的字型大小的單位。簡單的說它就是一個相對單位。看到rem一定會想起em單位，em（font size of the element）是指相對於父元素的字型大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根項目一個是依賴父元素計算。可以先看看rem的瀏覽器支援情況：
可以看到移動端基本支援：
ios:6.1系統以上支援；
android：2.1系統以上都支援；
案頭端IE支援情況不樂觀。
用法：
現代瀏覽器，IE9+，FireFox，Safari，Chrome，Opera，預設字型是16px,設定下根項目的字型大小為16px:
html { font-size:16px;}
，然後，如果希望某段文字的字型大小是12px,需要設定：
p { font-size: 0.75rem; //12÷16=0.75（rem）}
塊大小的設定是類似的，所以整個布局的關鍵就是設定根項目的字型大小了。設定好根項目字型大小值，布局就可以做到自適應了。
塊大小的設定，來個例子：
設定根項目字型大小為37.5px,在iphone6裡面需要一個寬100px的塊，就是這樣了：
<!DOCTYPE html><html> <meta charset="utf-8"></meta> <head> <title>vertical-align</title> <style type="text/css"> html{ font-size:37.5px; } #contentBox{ width:2.667rem; height:2.667rem; background:pink; } </style> </head> <body> <div id="contentBox"> </div> </body></html>
如果在iphone5下想得到一個100px的塊，需要設定基準值（即根項目字型大小）為32px。
下面專門談談rem的基準值設定。
rem基準值設定
想要rem適配不同尺寸的裝置，就需要針對不同裝置設定合適的基準值，如上例所示。
問題來了，基準值設定成多少合適？
一般拿到的設計稿是375px(2倍稿)*2的，也就是iphone6的大小。那麼對於iphone6來說，基準值可以設定為37.5px。即裝置寬度/10。這裡做了一個除以10的計算，是因為不希望font-size值太大。這樣使用rem時值也不會太大了。
如果是iphone5，基準值就是32px。
問題又來了，如何根據裝置尺寸來設定基準值？
有兩個方法，通過css media query 和js添加基準值：
css media query:
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ html{font-size: 37.5px;}}
用media query來實現難覆蓋到所有裝置：
html { font-size : 20px;}@media only screen and (min-width: 401px){ html { font-size: 25px !important; }}@media only screen and (min-width: 428px){ html { font-size: 26.75px !important; }}@media only screen and (min-width: 481px){ html { font-size: 30px !important; }}@media only screen and (min-width: 569px){ html { font-size: 35px !important; }}@media only screen and (min-width: 641px){ html { font-size: 40px !important; }}
而通過js來設定，可以實現覆蓋所有裝置：
js來設定：
document.getElementsByTagName(‘html‘)[0].style.fontSize = window.innerWidth / 10 + ‘px‘;
關於方案的利弊，其實上面的例子裡面可以看出，基準值設定為37.5px時（這個是設計稿的常用值），在計算相應的rem的時候，小數需四捨五入，可能會帶來一定的誤差，設計的同事像素眼是可以覺察到的。在可以接受的情況下允許這些誤差存在。在安卓機子上較多出現這類情況。
其他適配方案
也可以採用固定式配置：
1.在viewport meta標籤上設定width=320，頁面的各個元素也採用px作為單位。通過用JS動態修改標籤的initial-scale使得頁面等比縮放，從而剛好佔滿整個螢幕。
<meta name="viewport" content="width=320,user-scalable=no">
2.rem也可以使用自己設定viewport和content的方法來適配，以方便計算和設定值：
例如：
meta.setAttribute(‘content‘, ‘initial-scale=‘ + 1/dpr + ‘, maximum-scale=‘ + 1/dpr + ‘, minimum-scale=‘ + 1/dpr + ‘, user-scalable=no‘);
其中dpr通過window.devicePixelRatio擷取，iphone6的值是2.
對於2倍稿，可以直接設定基準值為2倍，這樣就不用設計稿的值除以2了。
iphone6適配的設計稿750px,基準值設定為75px就可以了。
修改了縮放倍數之後，1px邊線的問題也同時解決了。
代碼：
<!DOCTYPE html><html> <meta charset="utf-8"></meta> <meta name="viewport" content="" id="viewMeta"> <head> <title>vertical-align</title> <style type="text/css"> html{ font-size:75px; } #contentBox{ width:2.667rem; height:2.667rem; background:pink; border:1px solid #000; } </style> </head> <body> <div id="contentBox"> </div> </body> <script type="text/javascript"> var meta = document.getElementById(‘viewMeta‘); var dpr = window.devicePixelRatio; meta.setAttribute(‘content‘, ‘initial-scale=‘ + 1/dpr + ‘, maximum-scale=‘ + 1/dpr + ‘, minimum-scale=‘ + 1/dpr + ‘, user-scalable=no‘); </script></html>
圖圖：
參考：
http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/?utm_source=tuicool&utm_medium=referral#prettyPhoto
移動端使用rem適配及相關問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
