CSS單位大全 (px,em,rem,vh,vw,vmin,vmax)

px

px是相對顯示器的解析度及螢幕寬度決定，不是一個絕對單位。
但通常使用在css時，px很像一個絕對的值，它不會因為瀏覽器視窗長寬改變，或是因為層級關係，而變換寬高，除非今天換了另一台顯示器，那就會有些微的差距。

em

em是相對單位。它的繼承基準是父元素。通常瀏覽器的預設字體為16px，所以對應到父元素的預設寬度，1em ＝16px ，而它的子元素相對值就依這個值繼承下去 ; 若把的預設字體大小設定為32px，那它的子元素1em = 32px。
因為是繼承父元素，因此到較內層時，可能會比較複雜。

rem

rem也是相對單位，但是相對em就單純很多，其繼承的基準是根元素("r"意為"root")。
繼承基準不會隨著層級改變。

vw/vh

vw跟vh也是相對單位("v"意為viewport（視口）)。它是基於viewport寬度做百分比伸縮的單位。
寫法就是 一般的百分比數字，去掉%，換上vw/vh
若想要讓圖片寬度佔視口寬度的一半，那就是50vw。
另一種做法: 若今天想要讓某元素置中版面
將高度直接設定100vh，並使用align-items/justify-content: center。

vmin / vmax

vmin是當前 vw 和 vh 中較小的一個值
vmax是當前 vw 和 vh 中較大的一個值
(例如:直立時w:600vw/h:1080vh，這時的1vmin=6/1vmax=1.080)
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
vmin Relative to 1% of viewport's smaller dimension
vmax Relative to 1% of viewport's larger dimension

百分比寫法 %

％是相對於某個數值的百分比。
特別的是％的基準值依照屬性的特性決定

calc()

calc()可以在括號內寫算式加減乘除，來指定數值。(+ - * /)
特別的是可以各種單位混在一起計算，也支援先加減後乘除的數學運算邏輯。