簡介
單位
在編寫網(wǎng)頁過程中需要對元素進行字體恢氯,寬高,顏色等的設置鼓寺,這些需要使用單位勋拟。在css中設置字體和寬高使用的單位可以一致,例如:px
/em
/rem
rem來源
rem是css3中的單位
和px關系
px
是使用最多的單位妈候,em
與rem
可以和px
換算
建議
在做移動端項目的時候建議實用rem
作為單位敢靡,方便實現(xiàn)響應式效果。
em詳細說明
em參照父級元素大小
font-size:20px
,子元素font-size:1em
,那么子元素大小為20px
州丹。
em
合適的使用場景:text-indent(首行縮進)/line-height.
rem詳細說明
rem
參照的是html標簽的字體大小
rem
和em
不同點:em
參照父級元素醋安,如果父級元素沒有設置字體大小杂彭,則繼續(xù)向上查找,直至最后吓揪。rem
直接參照html
標簽字體大小亲怠,并且所有使用rem
單位的都是參照html
標簽
所以只需要設置html
標簽字體大小,就可以影響全局柠辞。
在做響應式網(wǎng)站時团秽,可以根據(jù)媒體查詢?nèi)フ{(diào)節(jié)html
標簽的字體大小實現(xiàn)共同調(diào)節(jié)其他標簽字體大小
使用媒體查詢調(diào)節(jié)html
字體大小,效果不夠精細(大小是分段調(diào)節(jié)的)叭首,
可以使用js動態(tài)計算html
的font-size习勤。
使用注意點
在rem
使用過程中要時刻注意字體最小12px
的問題
設置html的font-size屬性時候,最好不要小于12px
焙格,
如果設置了10px图毕,使用1rem時,其實是12px眷唉,因為最小值是12px予颤。