css3新增的單位:1、“ch”,字符0的寬度;2、“rem”,一個相對單位,主要是相對于根元素字體的大??;3、“vw”,視窗寬度;4、“vh”,視窗高度;5、“vmin”;6、“vmax”等。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
CSS3中新增的長度單位
CSS3中新增的長度單位有如下,
-
ch
,字符0的寬度 -
rem
,是一個相對單位,主要是相對于根元素字體的大小,使用rem,我們需要參考指定的根元素。 -
vw
,viewpoint width,視窗寬度,1vw=視窗寬度的1% -
vh
,viewpoint height,視窗高度,1vh=視窗高度的1% -
vmin
,vmax
等
新增的viewpoint相關(guān)的單位一般是針對移動設(shè)備的。
rem
其實跟em
是一回事,只不過rem
多了一個限制條件,它表示根元素(html元素)的font-size。
rem
和em
的區(qū)別,我們可以通過下面這個例子來看一看,
<html style="font-size: 12px;"> <body> <div id="div1" style="font-size: 16px"> <div id="div2" style="font-size: 1.2em"></div> <div id="div3" style="font-size: 1.2rem"> <div id="div4" style="font-size: 1.2em"></div> </div> </div> </body> </html>
此時,
-
div2的font-size:
16px*1.2em=19.2px
-
div3的font-size:
12px*1.2rem=14.4px
-
div4的font-size:
12px*1.2rem*1.2em=17.28px
可見,rem
不存在級聯(lián)關(guān)系,而em
存在級聯(lián)關(guān)系。
值得注意的是,IE8及以下、Safari 4、IOS 3.2等不支持rem
單位。
(學(xué)習(xí)視頻分享:css視頻教程)