CSS 单位指南：CSS em、rem、vh、vw 等详解
许多 CSS 属性如width、margin、padding和font-size都需要一个长度，而 CSS 有许多不同的方法来表达长度。
在 CSS 中，长度是一个数字，一个没有空格的单位。例如，5px、0.9em，等等。
在 CSS 中，一般有两种用于长度和尺寸的单位：绝对单位和相对单位。
绝对长度单位
绝对长度单位是基于一个实际的物理单位，通常被认为是跨设备的相同尺寸。但是，根据你的屏幕尺寸和质量，或者你的浏览器或操作系统的设置，可能会有一些例外。
下面是 CSS 中一些常见的绝对长度单位：
px
像素，或px，是 CSS 中最常见的长度单位之一。
在 CSS 中，1 像素被正式定义为 1/96 英寸。所有其他的绝对长度单位都是基于这个像素的定义。
但是，在最初制定这一标准时，大多数显示器的分辨率为 1024×768，DPI（每英寸点数）为 96。
现代设备的屏幕具有更高的分辨率和 DPI，所以 96 像素长的线可能无法精确测量到 1 英寸，这取决于设备的情况。
尽管以像素为单位的尺寸在不同的设备上会有所不同，但一般认为在屏幕上使用像素更好。
如果你知道你的页面将在高质量的打印机上打印，那么你可以考虑使用另一个单位，比如cm或mm。
你可以在这篇文章中了解更多关于像素单位的历史，以及为什么 CSS 英寸并不总是与物理英寸相匹配。
cm
厘米
在 CSS 中，1cm大约是 37.8 个像素，或约为 25.2/64 英寸。
mm
毫米
在 CSS 中，1mm大约是 3.78 像素，或 1/10 厘米。
in
英寸
在 CSS 中，1in大约是 96 个像素，或大约 2.54 厘米。
pt
磅
在 CSS 中，1pt大约是 1.3333 像素，或 1/72 英寸。
pc
派卡
在 CSS 中，1pc大约是 16 个像素，或 1/6 英寸。
相对长度单位
相对长度单位是相对于另一个元素的大小或设置。例如，一个元素的相对字体大小可以用父元素的字体大小来计算。
下面是一些常见的相对长度单位：
em
CSS 的em单位的名字来自于一个排版单位。在字体排印学中，em 这个词“最初是指所使用的字体和尺寸中大写字母 M 的宽度”。
当与font-size属性一起使用时，em继承其父元素的font-size大小：
.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
根em。这种相对单位不受父元素的大小或设置的影响，而是以文档的根为基础。对于网站来说，文档的根是html元素。
p {
font-size: 1.25rem;
}
在大多数浏览器中，默认的字体大小是 16，所以html元素的font-size是16px。所以在这种情况下，p是20px（16 × 1.25）。
但是如果用户改变了他们浏览器的默认字体大小，那么p的font-size就会相应地放大或缩小。
%
百分比，或相对于父级大小的百分比大小：
div {
width: 400px;
}
div p {
width: 75%;
}
由于父级的宽度是400px，所以内部段落的宽度是300px（400 × 0.75）。
vw
视图宽度，1vw是视口宽度的 1%。
body {
width: 100vw;
}
由于body元素被设置为100vw，即视口宽度的 100%，所以它将占用它所能获得的全部宽度。因此，如果你把浏览器的大小调整为 690 像素宽，那么body就会占据所有 690 像素的宽度。
vh
视图高度，1vh是视口高度的 1%。
div {
height: 50vh;
}
该div将填充视口高度的 50%。因此，如果浏览器窗口的高度是 900 像素，那么该div的高度将是 450 像素。
ex
CSSex单位的名称来自于字体排印学中的 x-字高，即“字体中字母 x 的高度”。在许多字体中，小写的 x 字符通常是最大字符高度的一半。
在 CSS 中，1ex是字体的 x-字高，或1em的一半。
但是，由于小写字母 x 的大小可以根据字体的不同而有很大的变化，因此 CSS 的ex单位很少被使用。
ch
字符单位，CSS 的ch单位被定义为字体的 0（零，或U+0030）字符的宽度。
虽然ch单位对于像 Courier 这样的单行线/固定宽度的字体来说是一种精确的测量，但对于像 Arial 这样的比例字体来说，它可能是不可预测的。
例如，如果你的字体是 Courier，而你把一个元素的宽度设置为60ch，那么这个元素的宽度就正好是 60 个字符。
但是，如果你的字体是 Arial，而你把一个元素的宽度设置为60ch，那么就不知道这个元素会有多宽——字符可能会溢出容器，也可能不够。
请看这篇文章，了解对ch单位的深入解释，并看一些例子。
vmin和vmax
视口最小（vmin）和视口最大（vmax）的单位是基于vw和vh的值。
1vmin是视口最小尺寸的 1%，而1vmax是视口最大尺寸的 1%。
例如，想象一个宽 1200 像素、高 600 像素的浏览器窗口。在这种情况下，1vmin是6px（vh的 1%，即 600 像素时较小值）。同时，1vmax是12px（vh 的 1%，即 1200 像素时的较大值）。