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。