CSS 单位

2022-09-15 03:35:27

CSS 单位

CSS 中的单位用于描述长度、尺寸、间距、字号等值。根据参照对象不同，常见单位可以分为两类：绝对长度单位 和 **相对长度单位 **。

绝对长度单位有固定的换算关系，相对长度单位则会根据字体大小、视口大小、父元素或其他上下文发生变化。

1. 绝对长度单位

绝对长度单位之间存在固定换算关系。

.container {
    width: 5cm;
    height: 5cm;
    background-color: red;
}

单位	名称	换算关系
cm	厘米	1cm = 96px / 2.54
mm	毫米	1mm = 1/10cm
Q	四分之一毫米	1Q = 1/40cm
in	英寸	1in = 2.54cm = 96px
pc	派卡	1pc = 1/6in = 16px
pt	点	1pt = 1/72in
px	像素	1px = 1/96in

需要注意的是，px 虽然叫「像素」，但在 CSS 中它是一个抽象单位，并不一定等于设备上的一个物理像素。高分辨率屏幕上，一个 CSS px 可能对应多个设备物理像素。

2. 相对长度单位

相对长度单位没有固定的物理大小，它们会根据上下文计算出最终值。

单位	相对于
em	在 `font-size` 中相对于父元素字体大小；在其他属性中相对于当前元素计算后的字体大小
rem	根元素 `<html>` 的字体大小
ex	当前字体中小写字母 `x` 的高度
ch	当前字体中数字 `0` 的宽度
lh	当前元素的 `line-height`
rlh	根元素的 `line-height`
vw	视口宽度的 1%
vh	视口高度的 1%
vmin	视口宽度和高度中较小值的 1%
vmax	视口宽度和高度中较大值的 1%
%	相对于包含块或对应属性的参考值，具体取决于使用的属性

相对单位可以让文本、布局和间距随上下文变化，更适合响应式布局。

3. 字体相关单位

字体相关单位通常会随着字体大小或行高变化，适合用来处理字号、间距、组件内部尺寸等场景。

em

em 和当前字体大小有关，但它在不同属性中的参照对象不同：

用在 font-size 上时，em 相对于父元素的字体大小。
用在其他属性上时，em 相对于当前元素计算后的字体大小。

.parent {
    font-size: 20px;
}

.child {
    font-size: 2em; /* 40px，相对于 .parent 的 font-size */
    margin-top: 1em; /* 40px，相对于 .child 自身计算后的 font-size */
}

rem

rem 始终相对于根元素 <html> 的字体大小，因此它比 em 更稳定，常用于全局字号、间距和响应式布局。

html {
    font-size: 16px;
}

.title {
    font-size: 2rem; /* 32px */
    margin-bottom: 1rem; /* 16px */
}

ex 和 ch

ex 和 ch 都和当前字体有关：

ex 相对于当前字体中小写字母 x 的高度。
ch 相对于当前字体中数字 0 的宽度。

ch 在控制文本宽度时比较有用，例如限制输入框或代码块大约显示多少个字符。

.input {
    width: 20ch;
}

lh 和 rlh

lh 和 rlh 和行高有关：

lh 相对于当前元素的 line-height。
rlh 相对于根元素的 line-height。

它们适合用于让间距和文本行高保持一致。

.article p {
    margin-bottom: 1lh;
}

4. 视口相关单位

单位	含义
vw	视口宽度的 1%
vh	视口高度的 1%
vmin	`vw` 和 `vh` 中较小的那个
vmax	`vw` 和 `vh` 中较大的那个

.container {
    width: 100vw;
    min-height: 100vh;
}

例如，当视口宽度是 1200px 时：

1vw = 12px
100vw = 1200px

5. 百分比 %

百分比也是开发中非常常见的相对单位，但它的参照对象会根据属性不同而变化。

例如：

width: 50% 通常相对于包含块的宽度。
height: 50% 通常相对于包含块的高度，但前提是包含块高度可以被确定。
padding: 10% 和 margin: 10% 通常相对于包含块的宽度。
transform: translateX(50%) 相对于元素自身的宽度。

.parent {
    width: 400px;
}

.child {
    width: 50%; /* 200px */
}

所以使用 % 时，不能只看数值本身，还要看它被用在哪个属性上。

6. em 和 rem 的区别

em 和 rem 都和字体大小有关，但参照对象不同。

单位	参照对象	特点
em	父元素或当前元素的字体大小	会受到嵌套结构影响，适合组件内部按比例缩放
rem	根元素 `<html>` 的字体大小	更稳定，适合全局字号和布局间距

html {
    font-size: 16px;
}

.parent {
    font-size: 20px;
}

.child {
    font-size: 2em; /* 40px */
    padding: 2rem; /* 32px */
}

在开发中，能简单理解为：

希望尺寸跟随当前组件的字体变化时，用 em。
希望尺寸跟随全局根字号变化时，用 rem。

选择单位时，先判断这个尺寸应该跟随谁变化，再选择对应的单位。