簡(jiǎn)單介紹

單位

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

rem來(lái)源

rem是CSS3中的單位

和px的關(guān)系

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

建議

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

em詳細(xì)說(shuō)明

em參照父級(jí)元素大小

如果父元素font-size: 20px;， 給子元素設(shè)置字體font-size: 1em;，子元素其實(shí)就是20px的大小

示例:

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

em合適的使用場(chǎng)景是: text-indent(首行縮進(jìn)) / line-height(行高)

rem詳細(xì)說(shuō)明

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

rem和em不同點(diǎn)就是em參照各自的父元素，如果父元素沒(méi)有設(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-size: .3rem; /*30px*/
}

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

使用注意點(diǎn)

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