尺寸單位
CSS 常用的尺寸單位 px 和 em 都是屬於相對單位。
• px
「px」是以螢幕的點 (pixels) 為單位。
p {font-size:12px;}
• em
「em」則是關係到目前設定(預設)的字體大小,比如說目前已經宣告字體大小為 16px,你又在這個宣告範圍內設定某些字的大小為 10em,意思就是這些被你設定的字大小會變成160px,也就是10倍的意思。具體一點的說法就是,em 關係到他的「父」設定。
以下範例,<p>標籤裡面的字體會是160px。
body {font-size:16px} p {font-size:10em}
• vw
viewpoint width,視窗寬度
• vh
viewpoint height,視窗高度
• vmin
vw 和 vh 其中較小的那個
• vmax
vw 和 vh 其中較大的那個
• calc() (Calculator)
可以用來計算動態長度
例如:width: calc(100vh – 50px);
意思就是整個螢幕的寬度減掉 50px
這個很常用在定位寬度,他可以隨著螢幕大小而做調整。
「+ 」「- 」「* 」「/ 」這四個運算符號都可以使用
注意:運算符號前後都要留一個空格
• in, cm, mm, pt, pc
其他的絕對單位則是以實際生活中的單位為標準,如 in (英吋), cm(公分), mm(公釐), pt(point=1/72英吋), pc(picas),不過因為現在的顯示器五花八門,在不一樣的裝置上顯示出來的結果經常會有差異,絕對單位已經不再絕對,所以現在比較少用。
*如果沒有特別宣告,則 CSS 將默認單位為 px