css3中rem詳解
rem：是一個相對單位，相對根元素字型大小的單位，再直白點就是相對於html元素字型大小的單位。
優點：這樣在計運算元元素有關的尺寸時，只要根據html元素字型大小計算就好。不再像使用em時，得來回的找父元素字型大小頻繁的計算，根本就離不開計算器。
剛剛做完一個移動端的專案有一些使用的小收穫在這裡分享一下，也許大家已用過。如果有欠妥的地方，歡迎討論。
html的字型大小設定為font-size:62.5%原因：瀏覽器預設字型大小是16px，rem與px關係為：1rem = 10px，10/16=0.625=62.5%，為了子元素相關尺寸計算方便，這樣寫最合適不過了。只要將設計稿中量到的px尺寸除以10就得到了相應的rem尺寸，方便極了。當然，直接將html元素設定為10px，也是可以的。只是習慣了62.5%。找了個參考圖，方便參考。如下：
說說專案中遇到的問題吧。
按照習慣寫法，程式碼如下：
html { font-size:62.5%; }
.menu{ width:100%; height:8.8rem; background:#000; line-height:8.8rem;color:#fff;font-size:3.2rem; text-align:center; }除錯工具：chrome
效果圖尺寸如下：
高度不應該是88嗎，為什麼大了那麼多，chrome在字型小於12px時都當12px 處理，這個坑呀。8.8*10=88,8.8*x=105.59，計算結果x=11.999，瀏覽器計算會存在誤差，正好不就12px嘛。
繞過這個坑，直接將html字型大小設定為625%，即100px。再看下效果。
可愛的88回來了，繞過了chrome的12px死穴。
裝置適配：
很簡單的喲，這個專案設計稿是640，就直接將640作為參考，html字型設定為625%。88px就可以直接換算為.88rem；適配其他尺寸的裝置，比如：320，88px的元素應該是44px，要是直接計算元素的尺寸，那引入rem無任何意義了，直接用媒體查詢，將html字型尺寸設定為312.5%即可，元素的尺寸只用寫一套。一套設計稿，適配n多尺寸的裝置，要多爽有多爽。計算方法：320/640*625%=312.5%，其他尺寸的直接將320換為對應的尺寸即可。