CSS 尺寸单位与响应式尺寸
CSS 中常见尺寸单位的适用边界，以及布局、字体和响应式尺寸该怎么选单位。
#type / concept
#status / growing
#resource / css
#tech / dev / frontend
[!info] related notes
- 所属 MOC: CSS MOC
- 并列概念: 网页的响应式布局（网页平板手机）
- 上位主题: CSS
CSS 尺寸单位与响应式尺寸
CSS 单位不是背概念题，而是决定布局、字体和适配策略的基础。
一句话定义
单位的选择，本质上是在决定某个尺寸应该相对什么参考物来计算。
最常见的单位
px
最直观、最常用，适合精确控制尺寸。
%
相对父元素，常用于宽度、自适应容器和图片。
em
相对当前元素字体大小，容易一层层叠加。
rem
相对根元素字体大小，更适合做全局尺寸体系。
vw / vh
相对视口宽高，适合全屏布局、首屏区域和某些响应式尺寸。
fr
Grid 里的剩余空间分配单位。
常见选择建议
布局尺寸
优先考虑：
px%frvw/vh
字体体系
优先考虑：
rem
局部相对缩放
可以考虑：
em
最容易混淆的点
100%不是永远等于屏幕宽高，它通常依赖父元素100vh是直接相对视口高度em会层层叠加，rem更稳定
最短记忆方式
px 精确，% 看父元素，rem 看根元素，vw/vh 看视口，fr 看网格剩余空间。