css3中rem是什麼意思

css3中的rem是一個相對單位，是相對根元素字體大小的單位；使用rem的優點就是在計算子元素有關的尺寸時，只要根據html元素字體大小來計算即可。

本文操作環境：windows7系統、CSS3版、Dell G3電腦。

css3中rem是什麼意思？

css3中rem詳解

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換成對應的尺寸即可。 ######推薦學習：《###css影片教學###》###

以上是css3中rem是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！