我们在 CSS 中只使用“px”（像素）的日子已经一去不复返了。如今，我们有很多选择。选择什么单位取决于上下文，有些应该用于文本，有些用于容器，有些用于打印。

单位	Name	相当于	关系到
em	parent font size	1em = parent font size	Font
rem	font size of the root element	1rem = size of root element	Font
cap	height of root capital letters	1cap = height of a root element capital letter	Font
rcap	height of root capital letters	1cap = height of a root element capital letter	Font
vw	default viewport width	1vw = 1% of the default viewport’s width	Viewport
vh	default viewport height	1vh = 1% of the default viewport’s height	Viewport

https://www.raresportan.com/css-units/

CSS 常用函数

CSS 有一些非常有用的函数，可以使用单个单位或多个单位来确定值。以下是一些示例：

calc

可以使用 calc() 函数来确定使用多个单位的尺寸：

.container{
    width: calc(100% - 2em);
}

clamp

clamp() 函数接受最小值、理想值和最大值。如果需要，所有这些单位都可以不同：

.container{
    /* 字体大小最小为 18px，最大为 3rem，其余为 4vw */
    font-size: clamp(18px, 4vw, 3rem);
}

min/max

min()和max()是两个可以根据上下文限制值的函数：

此处宽度将是 100vw - 3rem 和 80ch 之间的最小值。在不同的屏幕尺寸上，会有不同的最小值.

.container{
    width: min(100vw - 3rem, 80ch);
}

minmax

还有minmax()一个定义值范围的函数：

.container{
    width: minmax(30ch, 80ch);
}

在这种情况下，宽度的最小值为 30ch，最大值为 80ch，或介于这两者之间的任意值。