移動端自適應之——rem與font-size

需求：
在不一樣的移動終端設備中實現，UI設計稿的等比例適配。

 

方案：
佈局排版都用rem作單位，而後不一樣寬度的屏，js動態計算根節點的font-size。

假設設計稿是寬750px來作的，書寫css方便計算考慮，根節點的font-size假定爲100px，得出設備寬爲7.5rem。設計稿中標註的任何px數值均可以換算成px/100的rem值。
就是說，每個設備的寬度都定爲7.5個rem，而後寬度非750px的設備裏，就須要用JS對font-size作動態計算。
換算關係爲：根節點的font-size=設備寬度/7.5。
即：document.documentElement.style.fontSize = document.documentElement.clientWidth*(window.devicePixelRatio||1) / 7.5 + 'px'; 
注：須要考慮到dpr，即一倍屏兩倍屏的問題。
http://mobile.51cto.com/web-484304.htm

 

備註：

每一個瀏覽器對最小font-size的支持，不盡相同。js動態計算的font-size值過小時，會致使超小屏上UI顯示效果比預想中的偏大。
好比，font-size計算是10px，可是chrome只支持到12px，他就按照12px去渲染了，這就會致使UI偏大了。（上面方案中的100px確定是沒有問題的）
具體表現：

瀏覽器	最小支持font-size
PC chrome	12px (能夠經過安裝Advanced Font Settings插件支持到6px)
Android和iOS	1px(只測試了主流瀏覽器，未作充分測試)
cordova(Android和iOS)	9px

 

 

參考：http://www.cnblogs.com/lyzg/p/4877277.html