Web前端入门之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() 流体响应式设计（如字体、容器尺寸）。

  总结

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