CSS 語法 03 : 尺寸單位

尺寸單位

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