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')