在CSS中有許多的單位提供開發者使用,不同情況下適合的單位都不同,這篇將會彙整所有CSS可以使用的單位。
絕對單位
不會隨著root大小或螢幕大小改變的單位。
Unit | Description |
---|---|
cm | 公分 |
mm | 毫米 |
in | 英吋 |
px | 像素 |
pt | points(1pt = 1/72 of 1in) |
pc | picas (1pc = 12 pt) |
相對單位
會自適應的單位,為了因應RWD的需求,現在大多使用這些單位來做開發。
Unit | Description |
---|---|
em | 介紹文章 |
ex | 根據x軸的高度改變(很少使用) |
ch | 根據字元’0’的大小改變 |
rem | 介紹文章 |
vw | 介紹文章 |
vh | 介紹文章 |
vmax | 根據viewport最小邊改變 |
vmin | 根據viewport最大邊改變 |
% | 百分比 |
結語
最常使用的單位是px、rem、vw、vh、%這幾個,如果可以的話盡量使用px以外的其他幾種單位,因為px是絕對單位。不過並不是所有元素都要更改成相對單位,如果是border或shadow之類的寬度還是會習慣使用px,因為我們通常不會希望這些樣式改變。