像素(px)

  • 最常用的单位,相对于显示器的分辨率。1px等于屏幕上的一个点。
  • 例如:width: 100px; 表示宽度为100像素。

百分比(%)

  • 相对于父元素的尺寸。例如,如果一个元素的宽度设置为50%,那么它将占据其父元素宽度的一半。
  • 例如:width: 50%; 表示宽度为父元素宽度的50%。

视口宽度(vw)

  • 相对于视口(浏览器窗口)的宽度。1vw等于视口宽度的1%。
  • 例如:width: 50vw; 表示宽度为视口宽度的50%。

视口高度(vh)

  • 相对于视口(浏览器窗口)的高度。1vh等于视口高度的1%。
  • 例如:width: 100vh; 表示高度为视口高度的100%,即满屏高度。

视口最小宽度 vmin

  • 相对于视口的宽度和高度中的较小值。1vmin等于视口宽度和高度中较小值的1%。
  • 例如:padding: 5vmin; 表示内边距为视口宽度和高度中较小值的5%。

视口最大宽度 vmax

  • 相对于视口的宽度和高度中的较大值。1vmax等于视口宽度和高度中较大值的1%。
  • 例如:font-size: 1vmax; 表示字体大小为视口宽度和高度中较大值的1%。

em

  • 相对于当前元素的字体尺寸。1em等于当前元素的字体大小。
  • 例如:font-size: 2em; 表示字体大小是当前元素字体大小的两倍。

rem

  • 相对于根元素(html元素)的字体尺寸。1rem等于根元素的字体大小。
  • 例如:font-size: 1.5rem; 表示字体大小是根元素字体大小的1.5倍。
posted on 2024-10-11 16:44  XiSoil  阅读(7)  评论(0编辑  收藏  举报