響應式網頁設計:rem、em設置網頁字體大小自適應


「rem」是指根元素(root element,html)的字體大小,好開心的是,從遙遠的 IE6 到版本帝 Chrome 他們都約好了,根元素默認的 font-size 都是 16px。這樣一個新的單位兼容性如何呢?

IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem 了。

em 的計算是基於父級元素的,在實際使用中給我們的計算帶來了很大的不便。所以 rem 的出現解救了我這樣不會算術的人,再也不用擔心父級元素的 font-size 了,因為它始終是基於根元素(html) 的。

比如默認的 html font-size=16px,那么我想設置12px 的文字就是:12÷16=0.75(rem)

當然,你可以引入 CSS 預處理工具(Sass、LESS 、Stylus等)自動計算 rem 值,這里就不一一舉例了。

但是像我這樣的懶人或者團隊開發中還沒有引入 CSS 預處理工具的該腫么辦呢?只能搬個計算器啪啪啪了嗎?別急,你還可以變通一下。我們改變一下 html 的默認 font-size=10px 不就好計算了嘛!Like this:

html{font-size:62.5%; /* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */} p{font-size:14px;font-size:1.4rem;}

需要注意的是,為了兼容不支持 rem 的瀏覽器,我們需要在 rem 前面寫上對應的 px 值,這樣不支持的瀏覽器可以優雅降級。其實不用太糾結是默認的 font-size:100%,還是設置為 font-size:62.5%,如果你引入了 CSS 預處理工具那么自然可以使用默認值,如果由於其他原因使用 font-size:62.5% 也無可厚非,完全可以在 body 中重置回你需要的默認 font-size。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM