CSS 尺寸单位与响应式尺寸
CSS 中常见尺寸单位的适用边界，以及布局、字体和响应式尺寸该怎么选单位。
#concept
#growing
#css
#frontend
[!info] related notes
- 所属 MOC: CSS MOC
- 并列概念: 网页的响应式布局（网页平板手机）
- 上位主题: CSS
CSS 尺寸单位与响应式尺寸
CSS 单位不是背概念题，而是决定布局、字体和适配策略的基础。
一句话定义
单位的选择，本质上是在决定某个尺寸应该相对什么参考物来计算。
最常见的单位
px
CSS 像素，适合表达固定的布局长度；它不等同于一个设备物理像素，实际显示受设备像素比和缩放影响。
%
参考量由属性决定，不能统一理解为父元素尺寸。例如 width 通常相对包含块宽度，font-size 相对父元素字体大小，translateX(%) 相对元素自身参考盒宽度。
em
用于 font-size 时相对父元素字体大小；用于 padding 等其他属性时相对当前元素计算后的字体大小。嵌套设置相对字号可能逐层放大。
rem
相对根元素字体大小，更适合做全局尺寸体系。
vw / vh
相对视口宽高。移动浏览器工具栏会改变可见区域，100vh 不保证始终等于可见高度；可根据需要区分小视口 svh、大视口 lvh 与动态视口 dvh。
fr
Grid 里的剩余空间分配单位。
常见选择建议
布局尺寸
优先考虑：
px%frvw/vh
字体体系
优先考虑：
rem
局部相对缩放
可以考虑：
em
最容易混淆的点
- 百分比的参考量取决于属性；包含块也不总是直接父元素。
height: 100%能否得到预期高度，还取决于包含块高度是否确定。em在字号与其他属性中使用的参考不同；rem相对根字号。
最短记忆方式
px 是 CSS 像素，% 查属性的参考量，em/rem 看字体参考，视口单位区分静态与动态，fr 分配网格剩余空间。
Digital Biome