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

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，先為黃岡等服務(wù)建站，黃岡等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為黃岡企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

本文操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。

css3中rem是什么意思？

css3中rem詳解

rem：是一個相對單位，相對根元素字體大小的單位，再直白點就是相對于html元素字體大小的單位。

優(yōu)點：這樣在計算子元素有關(guān)的尺寸時，只要根據(jù)html元素字體大小計算就好。不再像使用em時，得來回的找父元素字體大小頻繁的計算，根本就離不開計算器。

剛剛做完一個移動端的項目有一些使用的小收獲在這里分享一下，也許大家已用過。如果有欠妥的地方，歡迎討論。

html的字體大小設(shè)置為font-size:62.5%原因：瀏覽器默認(rèn)字體大小是16px，rem與px關(guān)系為：1rem = 10px，10/16=0.625=62.5%，為了子元素相關(guān)尺寸計算方便，這樣寫最合適不過了。只要將設(shè)計稿中量到的px尺寸除以10就得到了相應(yīng)的rem尺寸，方便極了。當(dāng)然，直接將html元素設(shè)置為10px，也是可以的。只是習(xí)慣了62.5%。找了個參考圖，方便參考。如下：

說說項目中遇到的問題吧。

按照習(xí)慣寫法，代碼如下：

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; }

調(diào)試工具：chrome

效果圖尺寸如下：

高度不應(yīng)該是88嗎，為什么大了那么多，chrome在字體小于12px時都當(dāng)12px 處理，這個坑呀。8.8*10=88,8.8*x=105.59，計算結(jié)果x=11.999，瀏覽器計算會存在誤差，正好不就12px嘛。

繞過這個坑，直接將html字體大小設(shè)置為625%，即100px。再看下效果。

可愛的88回來了，繞過了chrome的12px死穴。

設(shè)備適配：

很簡單的喲，這個項目設(shè)計稿是640，就直接將640作為參考，html字體設(shè)置為625%。88px就可以直接換算為.88rem；適配其他尺寸的設(shè)備，比如：320，88px的元素應(yīng)該是44px，要是直接計算元素的尺寸，那引入rem無任何意義了，直接用媒體查詢，將html字體尺寸設(shè)置為312.5%即可，元素的尺寸只用寫一套。一套設(shè)計稿，適配n多尺寸的設(shè)備，要多爽有多爽。計算方法：320/640*625%=312.5%，其他尺寸的直接將320換為對應(yīng)的尺寸即可。

到此，關(guān)于“css3中的rem怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
當(dāng)前名稱：css3中的rem怎么使用
鏈接地址：http://weahome.cn/article/pojsgi.html