CSS單位
CSS有用於表達長度的幾個不同的單元。
許多CSS屬性採取"length"的值,如寬度,邊緣,填充,字體大小,邊框寬度等
長度是一個數字後跟一個長度單位,諸如10px的,2em的等
用空格不能在數字和單位之間出現。 但是,如果該值為0,該單元可以省略。
對於某些CSS屬性,負長度是允許的。
有兩種類型的長度單位:相對和絕對的。
瀏覽器支持
在表中的數字指定完全支持長度單元中的第一版本的瀏覽器。
長度單位 | |||||
---|---|---|---|---|---|
em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
ch | 27.0 | 9 | 1.0 | 7 | 20.0 |
rem | 4 | 9 | 3.6 | 4.1 | 11.6 |
vh, vw | 20.0 | 9 | 19.0 | 6 | 20.0 |
vmin | 20.0 | 9.0 * | 19.0 | 6 | 20.0 |
vmax | 26.0 | 不支持 | 19.0 | 不支持 | 20.0 |
Note: Internet Explorer 9的VMIN與非標準名稱支持:虛擬機。
相對長度
相對長度單位指定相對於另一長度屬性的長度。 相對長度單位尺度不同的渲染媒體之間更好。
單元 | 描述 |
---|---|
em | 相對於元素的字體大小(2em means 2 times the size of the current font) 試用 |
ex | 相對於當前字體的x高度(rarely used) 試試吧 |
ch | 相對寬的"0" (zero) |
rem | 根元素的相對字體尺寸 |
vw | 相對於視寬度的1%* 試試吧 |
vh | 相對於視口的高度的1%* 試試吧 |
vmin | 相對於視口的1%*較小尺寸試試吧 |
vmax | 相對於視口的1%*較大尺寸試試吧 |
% |
Tip:在EM和REM單位為創建可擴展的完美佈局實用!
*視=瀏覽器窗口大小。 如果視口為50cm寬,1vw =0.5厘米。
絕對長度
絕對長度單位是固定的長度表示在任何這些將作為正是大小。
不建議在屏幕上使用絕對長度單位,因為屏幕尺寸的差別如此之大。 然而,如果輸出介質是已知的,例如用於打印佈局可以使用它們。
單元 | 描述 |
---|---|
cm | 厘米試試吧 |
mm | 毫米試試吧 |
in | 英寸(1in = 96px = 2.54cm) 試試吧 |
px * | 像素(1px = 1/96th of 1in) 試試吧 |
pt | 點(1pt = 1/72 of 1in) 試試吧 |
pc | 派卡(1pc = 12 pt) 試試吧 |
*像素(px)是相對於觀看設備。 對於低DPI設備,1px的是一個設備像素(dot)的顯示。 對於打印機和高分辨率的屏幕意味著1px的多種設備像素。