css3中的rem怎么使用

這篇文章主要介紹“css3中的rem怎么使用”，在日常操作中，相信很多人在css3中的rem怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css3中的rem怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

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

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換為對應的尺寸即可。

到此，關于“css3中的rem怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！