CSS 中常见长度单位

在 CSS 中，一般有两种用于长度和尺寸的单位：绝对单位和相对单位。

一、绝对长度单位

px

像素，或 px，是 CSS 中最常见的长度单位之一。
在 CSS 中，1 像素被正式定义为 1/96 英寸。所有其他的绝对长度单位都是基于这个像素的定义。
但是，在最初制定这一标准时，大多数显示器的分辨率为 1024×768，DPI（每英寸点数）为 96。

in: 英寸

在 CSS 中，1 英寸大约是 96 个像素，或大约 2.54 厘米

二、相对长度单位

em

当与 font-size 属性一起使用时，em 继承其父元素的 font-size 大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  font-size: 16px;
}

.container p {
  font-size: 1em;
}

.container h2 {
  font-size: 3em;
}

.container h3 {
  font-size: 2em;
}

在这个例子中，p 的 font-size 是 16px（16 * 1）。同时，h2 的 font-size 为 48px（16 * 3），h3 为 32px（16 * 2）。

如果 em 与另一个属性（如 width）一起使用，em 是用目标元素的大小来计算的。

rem

这种相对单位不受父元素的大小或设置的影响，而是以文档的根为基础。对于网站来说，文档的根是 html 元素

1
2
3
p {
  font-size: 1.25rem;
}

在大多数浏览器中，默认的字体大小是 16，所以 html 元素的 font-size 是 16px。所以在这种情况下，p 是 20px（16 * 1.25）

vw

视图宽度，1vw 是视口宽度的 1%。

比如说：

1
2
3
body {
  width: 100vw;
}

由于 body 元素被设置为 100vw，即视口宽度的 100%，所以它将占用它所能获得的全部宽度。因此，如果你把浏览器的大小调整为 690 像素宽，那么 body 就会占据所有 690 像素的宽度

wh

视图高度，1vh 是视口高度的 1%。

例如：

1
2
3
div {
  height: 50vh;
}

该 div 将填充视口高度的 50%。因此，如果浏览器窗口的高度是 900 像素，那么该 div 的高度将是 450 像素。