em和rem筆記

簡單介紹

單位

在編寫網(wǎng)頁過程中，需要對元素（標(biāo)簽）進(jìn)行寬高、
顏色、字體等的設(shè)置，這些需要使用單位。
在CSS中，設(shè)置字體和寬高使用的單位可以一致，例如
：px/rem/em/

rem來源

rem是CSS3中的單位

和px關(guān)系

px是使用最多的單位，
em和rem可以和px 單位進(jìn)行換算，就如克和千克之間可以換算一樣。
具體換算規(guī)則，如下。

建議

在做移動端項目的時候，建議使用rem作為單位
可以方便快捷、容易的實(shí)現(xiàn)響應(yīng)式效果

em詳細(xì)說明

em參照父級元素大小
如果父元素font-size:20px,給子元素設(shè)置字體font-size:1em;,
子元素就是20px的大小

示例：

• 設(shè)置1e=20px
• 2em=40px;
• 2.5em=50px;
• 0.5em=10px;

em合適的使用場景是:text-indent(首行縮進(jìn)）/
line0height(行高)

rem詳細(xì)說明

rem參照的是html標(biāo)簽字體大小

rem 和 em 不同點(diǎn)就是em參考各自的父元素，如果父元素沒有設(shè)置字體大小，則繼續(xù)向上查找(父父元素)，直至最后
rem直接參照html標(biāo)簽字體大小，并且是所有使用rem單位都是參照html標(biāo)簽
所以只需要更改html標(biāo)簽字體大小，就可以影響全部使用rem單位的標(biāo)簽

代碼示例

html{
font-size:100px;
}
.title{
    width:5rem;/*500px*/
    height:5rem;/*500px*/
    font-zize:.3rem;/*30px*/

在做響應(yīng)式網(wǎng)址時，可以根據(jù)媒體查詢?nèi)フ{(diào)節(jié)html標(biāo)簽的字體大小，實(shí)現(xiàn)共同調(diào)節(jié)其他標(biāo)簽大小的效果
使用媒體查詢調(diào)節(jié)html字體大小，效果不夠精細(xì)（大小是分段改變的），可以使用JavaScript動態(tài)計算html的font-size

使用注意點(diǎn)

在rem的使用過程中，要刻意注意字體最小12px的問題
設(shè)置html的font-size屬性時，最好不要小于12px
如果設(shè)置了10px,使用1rem的時候，其實(shí)就是12px,因?yàn)樽钚?2px