CSS 中的常用尺寸单位
像素(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倍。