單位

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

rem來源

rem是css3中的單位

和px的關(guān)系

px是使用最多的單位。

em和rem可以和px進(jìn)行換算，就比如克和千克之間可以換算一樣

具體換算規(guī)則，在下面詳細(xì)說明。

建議

在做移動(dòng)端項(xiàng)目時(shí)，建議使用rem做單位

可以方便、快捷、容易的實(shí)現(xiàn)響應(yīng)式布局。

em詳細(xì)說明

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

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

事例：

• 設(shè)定 1em = 20px ；

• 2em = 40px ;

• 2.5em = 50px ;

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

rem詳細(xì)說明

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

rem和em 不同點(diǎn)就是em 參考各自的父元素，如果父元素沒有設(shè)置字體大小，則會(huì)繼續(xù)向上尋找（父父）元素，直至最后。

rem直接參考html的字體大小，就可以影響全部使用rem單位的標(biāo)簽。

事例代碼：

html{

font-size:100px;

}

.title{

width:5rem;

height:5rem;

font-size:.3rem;

}

在做響應(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字體大小，效果不夠好（大小是分段改變的），可以使用js動(dòng)態(tài)計(jì)算html的font-size

使用注意點(diǎn)

在rem使用過程中，要時(shí)刻注意字體最小是12px的問題

設(shè)置html的font-size屬性時(shí)，最好不要小于12px

如果設(shè)置了10px，使用1rem時(shí)，其實(shí)是12px,因?yàn)樽钚∈?2px