[css] 使用rem時(shí)應(yīng)該注意什么？

看了下 絕對(duì)單位 和 相對(duì)單位。em 是相對(duì)元素本身的 font-size 的相對(duì)單位，比如元素本身的 font-size 是 14px，那么 1.2em = 1.2 * 14px = 16.8px。注意，是相對(duì)元素本身的 font-size，會(huì)隨著元素的 font-size 的改變而改變。rem 是 root em 的縮寫，相對(duì)根元素的 font-size 相對(duì)單位，比如根元素的 font-size 是 14px，那么 1.2rem = 1.2 * 14px = 16.8px。注意，是相對(duì)根元素的 font-size，不論元素處于什么位置，乘法的基數(shù)都是 14px(根元素的 font-size)。em 一半用于設(shè)置元素的 padding, margin, border-radius 等。 rem 一半用于設(shè)置元素的 font-size。 px 一半用于設(shè)置 border。如果用 em 設(shè)置 font-size 很容易會(huì)出現(xiàn)意想不到的問題。比如嵌套的 div。// css div {font-size: 0.8em; }<!--html--> <div> div1 <div>div2</div> </div>上面的代碼，假設(shè)根元素用的是默認(rèn)值 16px，那么第一個(gè) div 的字體是 0.8 * 16px = 12.8px，第二個(gè) div 的字體會(huì)先繼承第一個(gè) div 的 font-size = 12.8px，然后再乘以 0.8，0.8 * 12.8px = 10.24px，就會(huì)導(dǎo)致兩個(gè) div 的字體不一樣大。如果使用的是 rem，那么基數(shù)都是 16px，兩個(gè) div 的大小都是 12.8px。

個(gè)人簡(jiǎn)介

我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[css] 使用rem时应该注意什么？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。