CSS長度單位:vh、vw、vmin、vmax、em、rem、ex、ch、px
CSS的長度單位。
一些屬性可能允許有負長度值,或者有一定的範圍限制。如果不支援負長度值,那應該變換到能夠被支援的最近的一個長度值。
長度單位包括包括:相對單位和絕對單位。
相對長度單位包括有: em, ex, ch, rem, vw, vh, vmax, vmin
絕對長度單位包括有: cm, mm, q, in, pt, pc, px
1、vh、vw
有點像width和height屬性,v(viewpoint)也就是說vh、vw直接對應的是當前視口的尺寸。
width:100vh;
height:100vh;
width:100%;
height:100%;
以上兩種表達有什麼區別呢。如果瀏覽器高度為1000px,寬度為800px,那麼1vh=1000/100=10px,1vw=800/100=8px;而%要受到父元素的約束,並不能直接根據瀏覽器的尺寸計算。2、vmin、vmax
vmin表示當前寬和高的小者,vmax則表示當前寬和高的大者。
3、em、rem
em同樣是個相對大小的單位,下面是css3參考手冊中的解釋
相對長度單位。相對於當前物件內文字的字型尺寸。
如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。
rem
相對長度單位。相對於根元素(即html元素)font-size計算值的倍數
也就是說這樣設定的話,每層都要看它的父元素,而這並不總是我們想要的,rem可以來補充em不足。來自夢柯網的例子 body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } <body> <div> Test <!-- 14 * 1.2 = 16.8px --> <div> Test <!-- 16.8 * 1.2 = 20.16px --> <div> Test <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div> </body>
r(root)通常指<html>標籤,也就是隻要用rem作為單位,都會以<html>標籤的設定為基礎。
4、ex
相對長度單位。相對於字元“x”的高度。通常為字型高度的一半。
如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。
5、ch,是CSS3新增單位,有少部分瀏覽器不支援,如Android browser
數字“0”的寬度
6、px
相對長度單位。畫素(Pixels)。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
7、q
1/4毫米(quarter-millimeters)。絕對長度單位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
8、in
英寸(Inches)。絕對長度單位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
9、pt
點(Points)。絕對長度單位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
10、pc
派卡(Picas)。絕對長度單位。相當於我國新四號鉛字的尺寸。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
11、cm/mm
釐米/毫米