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`。