說到css的單位,大家應(yīng)該首先想到的是px,也就是像素,我們在網(wǎng)頁布局中一般都是用px,但是近年來自適應(yīng)網(wǎng)頁布局越來越多,em和百分比也經(jīng)常用到了。然后隨著手機(jī)的流行,web app和hybrid app的開發(fā),都用到了css3技術(shù),在css3中,新增了許多單位,rem、vw和vh、vmin和vmax、ch和ex等等,那現(xiàn)在對這些單位分別做一下詳細(xì)的介紹吧。

1、em

做前端的應(yīng)該對em不陌生,不是什么罕見的單位,是相對單位,參考物是父元素的font-size,具有繼承的特點(diǎn)。如果字體大小是16px(瀏覽器的默認(rèn)值),那么 1em = 16px。

不過,這樣使用很復(fù)雜,很難很好的與px進(jìn)行對應(yīng),因此,前端開發(fā)的前輩們總結(jié)了一個經(jīng)驗(yàn)

body {font-size: 62.5%;
}

那么,這樣之后 1em = 10px 在布局等使用的時(shí)候好換算了很多。

2、百分比

百分比相信大家更不會陌生了,百分比一般寬泛的講是相對于父元素,但是并不是十分準(zhǔn)確。

1、對于普通定位元素就是我們理解的父元素

2、對于position: absolute;的元素是相對于已定位的父元素(offset parent)

3、對于position: fixed;的元素是相對于 ViewPort

viewport:可視窗口,也就是瀏覽器的window那么大。

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運(yùn),軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計(jì)培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式