Web前端入门第 24 问：CSS 单位

单位就是那个形容长度大小的东西。比如身高180cm(厘米)，cm就是单位。

css 也不例外，要描述一个盒子的大小，就必须要用到单位。

css 单位根据其作用分为几大类：绝对单位、相对单位、视口单位、角度单位、时间单位、网格单位、频率单位、分辨率单位。

动态计算单位

认识单位之前，先认识几个动态计算函数，这东东的用法可强大了，后续再介绍。

calc()

动态计算值（如width: calc(100% - 20px)）
min()

取最小值（如width: min(100%, 500px)）
max()

取最大值（如width: max(50%, 300px)）
clamp()

限制在范围（如font-size: clamp(1rem, 2.5vw, 2rem)）

绝对单位

绝对单位的大小固定不变，与屏幕或设备无关，适合精确控制。例如一个长宽20像素的盒子，不管是在电脑上还是手机中，其大小就是20px。

需要注意系统缩放，分辨率2560x1440的笔记本电脑，如果缩放100%，其宽度还是2560像素；如果缩放150%，其宽度将变为2560÷1.5=1706.66。。

同一个20像素，在缩放100%和缩放150%肉眼看到的大小是不一样的。

px（像素）

最常用单位，1px = 1屏幕像素（非物理像素），适合固定尺寸元素（边框、图标）
cm（厘米）

实际物理尺寸（1cm ≈ 37.8px），多用于打印样式
mm（毫米）

同厘米，但更精细（1cm = 10mm）
in（英寸）

1in = 2.54cm ≈ 96px
pt（点）

印刷单位，1pt = 1/72英寸 ≈ 1.33px
pc（派卡）

印刷单位，1pc = 12pt ≈ 16px

cm 、 mm 、 in 、 pt 、 pc 这些单位主要用于打印和其他需要精确尺寸的场合。

相对单位

相对单位的大小基于其他参考值（父元素、视口、字体大小等），适合响应式设计。

相对单位必须要找一个老六，老六的大小就是他的标准。

em

相对于当前元素的字体大小，1em等于当前元素的字体大小。如果父元素有font-size属性，则子元素的em值是根据父元素的字体大小计算的。适用于创建可以相对于用户设定的字体大小缩放的布局。
rem

相对于根元素（html元素）的字体大小，1rem等于根元素的字体大小。使用rem单位可以方便地进行响应式布局，同时避免em单位的嵌套导致的复杂计算问题。
%

相对于父元素的尺寸，例如width: 50%表示元素宽度为父元素宽度的50%。
ch

相对于当前元素的字体宽度，1ch = 当前字体中 "0" 字符的宽度，适合文本排版对齐。
ex

相对于当前字体的x高度，1ex等于当前字体的x高度，使用较少。

视口单位

视口单位就是相对于浏览器窗口的宽度或高度，它与屏幕或设备无关，只与浏览器的可视窗口有关。

vw

视口宽度的1%（50vw = 视口宽度的一半）。
vh

视口高度的1%。
vmin

取视口宽高中较小的1%（如竖屏手机中相当于vw）。
vmax

取视口宽高中较大的1%。
svh/lvh

区分短视口（svh）和完整视口（lvh），解决移动端浏览器地址栏遮挡问题。

角度单位

对头，就是那个三角函数中的角度，弧度。

deg（度数）

表示角度，用于控制旋转和变形。
rad（弧度）

表示弧度，用于控制旋转和变形。
grad（梯度）

表示梯度，用于控制旋转和变形。
turn（圈数）

表示旋转的圈数，用于控制旋转和变形。

时间单位

多用于控制持续时间，如动画。

s（秒）

用于控制动画和过渡的时间长度。
ms（毫秒）

用于控制动画和过渡的时间长度，是秒的千分之一。

网格单位

用于网格布局，就是 Grid。

fr

表示网格容器剩余空间的一部分，用于网格布局。

频率单位

嘿...这个真不常见。

Hz（赫兹）

表示频率，用于控制动画和音频的播放速度。
kHz（千赫兹）

表示千赫兹，是赫兹的千倍，用于控制音频的播放速度。

分辨率单位

用于打印媒体查询，没见过~~

dpi（每英寸点数）

表示每英寸的点数，用于控制图片大小和清晰度。
dpcm（每厘米点数）

表示每厘米的点数，用于控制图片大小和清晰度。
dppx（每像素点数）

表示每像素的点数，用于控制图片大小和清晰度。

常用单位

这么多单位，可不是每个都会使用的，一般常用的也就几个，如下：

px

边框、固定尺寸图标、微小间距。
%

容器宽度、高度（相对于父元素）。
rem

字体大小、间距、布局尺寸。
vw/vh

全屏布局、响应式字体/元素。
fr

CSS Grid 布局中的弹性列宽。
calc()

动态计算尺寸（如 calc(100% - 20px)。
clamp()

流体响应式设计（如字体、容器尺寸）。

总结

核心掌握：px、%、rem、vw/vh、fr、calc()、min()、max()、clamp()。
了解即可：em、vmin/vmax、ch。
特殊场景备用：svh/lvh、ex。
无需深究：cm、mm、in、pt、pc。