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。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]