簡單介紹
單位
在編寫網(wǎng)頁過程中订讼,需要對元素(標(biāo)簽)進(jìn)行寬高髓窜、顏色、字體等的設(shè)置欺殿,這些需要使用單位寄纵。
在CSS中,設(shè)置字體和寬高使用的單位可以一致脖苏,例如:px
/ em
/ rem
/ ...
rem來源
rem是CSS3中的單位
和px的關(guān)系
px
是使用最多的單位程拭。
em和rem可以和px換算,就如克和千克可以換算
一樣棍潘。
具體換算規(guī)則如下恃鞋。
建議
在做移動端項目的時候,建議使用
rem
作為單位
可以方便亦歉、快捷恤浪、容易的實現(xiàn)響應(yīng)式效果
em詳細(xì)說明
em參照父級元素字體大小
如果父元素font-size: 20px;
,給子元素設(shè)置字體font-size: 1em;
肴楷,子元素其實就是20px
的大小
示例:
- 設(shè)定 1em = 20px
- 2em = 40px
- 2.5em = 50px
- 0.5em = 10px
em
合適的使用場景是: text-indent(首行縮進(jìn)) / line-height(行高)
rem詳細(xì)說明
rem參考的是html標(biāo)簽字體大小
rem
和em
不同點就是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-size: .3rem; /*30px*/
}
在做響應(yīng)式網(wǎng)址時鞠值,可以根據(jù)媒體查詢?nèi)フ{(diào)節(jié)
html
標(biāo)簽的字體大小,實現(xiàn)共同調(diào)節(jié)其它標(biāo)簽大小的效果
使用媒體查詢調(diào)節(jié)html
字體大小瑰剃,效果不夠精細(xì)(大小是分段改變的)齿诉,可以使用JavaScript動態(tài)計算html的font-size
使用注意點
在rem使用過程中,要時刻注意字體最小12px
的問題
設(shè)置html的font-size
屬性時候晌姚,最好不要小于12px
如果設(shè)置了10px
粤剧,使用1rem
的時候,其實是12px挥唠,因為最小12px