簡單介紹
單位
在編寫網(wǎng)頁的過程中兴喂,需要對元素(標簽)進行寬高、顏色焚志、字體等的設置,這些需要使用單位衣迷。
在css中,設置字體和寬高使用的單位可以一致酱酬,例如:px
/em
/rem
/..
rem來源
rem是css3中的單位
和px的關系
px
是使用最多的單位壶谒。
em和rem可以和px單位進行換算,就比如:‘克和千克’之間可以換算一樣膳沽。
具體換算規(guī)則佃迄,在下面詳細說明泼差。
建議
在做移動端項目的時候,建議使用
rem
作為單位
可以方便呵俏、快捷堆缘、容易的實現(xiàn)響應式效果
em詳細說明
em參照父級元素大小
如果父元素font-size: 20px;
,給子元素可以設置字體font-size:1em;
普碎,子元素其實就是20px
的大小
示例:
- 設定 1em=20px
- 2em=40px
- 2.5em=50px
- 0.5em=10px
em
合適的使用場景是: text-indent(首行縮進) / line-height(行高)
rem詳細說明
rem參考的是html標簽字體大小
rem和em不同點就是em參考各自的父元素吼肥,如果父元素沒有設置字體大小,則繼續(xù)向上查找(父父元素)麻车,直至最后rem
直接參照html
標簽字體大小缀皱,并且是所有使用rem單位的都是參照html
標簽。
所以只需要更改html
標簽字體大小动猬,就可以影響全部使用rem
單位的標簽
代碼示例:
html{
font-size: 100px;
}
.title{
width:5rem;/*500px*/
height: 5rem;/*500px*/;
font-size: .3rem;/*30px*/
}
在做響應式網(wǎng)址時啤斗,可以根據(jù)媒體查詢去調節(jié)
html
標簽的字體大小,實現(xiàn)共同調節(jié)其他標簽大小的效果
使用媒體查詢調節(jié)html
字體大小赁咙,效果不夠明顯(大小是分段改變的)钮莲,可以使用JavaScript動態(tài)計算html的font-size
使用注意點
在rem使用過程中,要時刻注意字體最小12px
的問題
設置html的font-size屬性時候彼水,最好不要小于12px
如果設置了10px
,使用1rem
的時候崔拥,其實是12px,因為最小是12px