移動端

　　

有哪些網頁尺寸單位？

CSS 中的單位有不少種：

• 百分比（%）
• 英寸（in）
• 釐米（cm）
• 毫米（mm）
• 磅數（pt）
• 12 點活字（pc）
• 字母高度一半（ex）
• 父級字體（em）
• 像素（px）
• 根元素字體（rem）
• 相對於視窗的寬度（vw）
• 相對於視窗的高度（vh）
• 相對於視口的寬度或高度中較大的那個（vmax）
• 相對於視口的寬度或高度中較小的那個（vmin）：

查詢瀏覽器兼容網站：http://caniuse.com/

設備像素dp(device pixels)

ppi(pixels per inch)表示每英寸所擁有的像素(pixel)數目，數值越高，表明屏幕能以更高的密度顯示圖像。

計算公式：ppi=像素數量/物理尺寸（英寸數）

設備獨立像素dips(device-independent pixels)

可看到同一張圖片在各屏幕顯示大小不一。

咱們但願不一樣屏幕顯示圖片的大小要一致。

咱們要計算圖片縮放比例。

計算公式：圖片邏輯像素大小px1 / 圖片縮放後實際像素大小px2 = 設備像素dp / 設備獨立像素dips

px2 = px1 * (dp / dips)
px2 = px1 * dpr

設備像素比dpr(devicePixelRatio)

devicePixelRatio是設備像素dp和設備獨立像素dips的比例，
也就是dpr = dp / dips

css像素

css像素是一個相對單位。
相對不一樣屏幕，其實際像素大小不一樣。
咱們定義時，是定義其邏輯像素。即該圖要用多少個像素來顯示。

rem是什麼？

rem顧名思義就是root element，這個是一個相對的單位。

與em的差異在於rem相對的是根節點html的font-size,em相對的是父元素font-size。

如何優雅地使用rem

使用rem實際上是修改html的font-size，那麼使用rem的元素的大小也會相應的改變，因此咱們只要寫一份css就能夠適配全部手機的屏幕了。雖然rem在某些瀏覽器下面不夠精準，但那也只是極少數，若是須要很是精準的適配，那麼可使用js來計算html的font-size。

如今設計師給的視覺稿，通常都是按照750px來設計的。當咱們拿到視覺稿時，首先把視覺稿的寬度轉換爲rem，咱們並不須要考慮設備的分辨率，只須要按照

計算公式：視覺稿寬度 = font-size * rem

這個公式來計算就行了。視覺稿的寬度是給定的，咱們以750px爲例，font-size 與rem是兩個變量，咱們只須要它們的乘積等於640便可。咱們採用定一變一的方式，假定rem=7.5，那麼初始值font-size就必須等於 100px，咱們就能夠根據須要適配的屏幕寬度來等比例調整font-size。那麼若是咱們750px的視覺稿須要顯示成640px呢，咱們只須要把font-size對應的縮小就能夠了。其餘的各類的屏幕，只須要等比例縮放就行了。

js+sass計算方案

簡單JS動態設置font-size（簡單demo，若有須要最好加上DomContentLoaded和orientationchange的監聽）：

fnResize();
window.addEventListener("resize", function() { fnResize() }, false); function fnResize(){ var docWidth = document.documentElement.clientWidth, body = document.getElementsByTagName('html')[0]; body.style.fontSize = docWidth / 32 + 'px'; }

sass:

@function rem($px){ @return $px*(1/20)*1rem; } .ty_con{  minwidth: rem(300); /* 15rem */ }

rem問題及解決方案

問題：
部分安卓機rem計算出來的font-size老是要比預期要大一些或者小一些：華爲，魅族......（小數保留問題）這樣會致使最後的計算是不許確的。

解決方案1:

1，在css的使用上寬度佈局儘可能使用百分比，flex和box-sizing來作，減小寬度計算偏差產生的問題。

2，icon雪碧圖的圖標之間留白，在寫寬度的時候多寫幾像素使圖標居中。

解決方案2:

在每次計算完頁面的fontSize後，對某個實際元素的大小進行判斷，若是對比原來的比例有0.2以上的出入，那就用這個比例去從新設置頁面的fontSize。若是是正常狀況，就不會執行頁面fontSize從新這一步。至此，問題也算是解決了。

解決方案3:

直接使用Flexible實現手淘H5的終端適配

固然還有一些其餘的方案這裏就不提了解決方案4，解決方案5.。。。。

有興趣的同窗能夠看下Flexible的解決方案：

使用Flexible實現手淘H5頁面的終端適配：

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

github地址：https://github.com/amfe/lib-flexible

移動端Web適配單位rem的坑你知道多少 ：http://www.jianshu.com/p/8300a5ec6480

關於移動端 rem 佈局的一些總結：
http://www.javashuo.com/article/p-swjviunj-ep.html