Front-end: CSS 單位總表

CSS 單位

• vh：視窗的高度，也就是眼睛看到螢幕的高度。如果螢幕的解析度是 1920x1080。那麼 1vh 的高度就是 1080px。
• vw：與 vh 相對，視窗的寬度。所以相對的 1vw 寬度就是 1080px。
• %：百分比，但是要注意的是這邊百分比是以 parent element 為基準。如果 parent element 沒有設定寬高，那百分比就會無效。
• rem：根據 root element 來變化大小。如果 root element 設定 10px，那 1rem = 10px。
• px：固定的像素點。
• calc：計算函數，可以計算當前的值，然後才賦值 height: calc(~'100% - 7.4rem - 10px')。