外观
em、rem、px、vw、vh 怎么选？
px 是 CSS 像素，适合边框、阴影和设计稿上的固定细节。rem 相对根元素字体，适合一整套跟着基准字号走的字号和间距。em 相对当前元素字体，层级一多就会叠乘。vw、vh 相对视口，适合全屏区和按屏宽缩放的排版。
原理
根元素默认字体一般是 16px。html { font-size: 62.5% } 是为了让 1rem = 10px，但会改变用户对根字号的预期，正文要再设回去。更稳的做法是根字号保持浏览器默认，组件用 rem 表达相对关系。
em 在 font-size: 1.2em 的嵌套里会连乘。间距如果也用 em，父元素字号一变，间距跟着变。
vw 是视口宽度的 1%。移动端整页用 vw 做字号时，要配 clamp 限制最小和最大，否则大屏字会过大、小屏字会过小。
% 相对包含块。宽度的百分比通常相对包含块的宽度，高度的百分比需要父元素有确定高度。
追问
移动端适配用哪种？
布局用 flex 或 grid 加百分比、minmax 和 gap。字号用 rem 或 clamp。不要再把设计稿机械地换成满屏 vw。1 物理像素的边框再用 transform 或 devicePixelRatio 处理，见 设备像素。
vh 在手机上为什么会跳？
地址栏伸缩时，传统 vh 会变。需要稳定的全屏高度时看 dvh、svh、lvh：动态、小、大视口。旧浏览器要有 vh 后备。
易错点
em不是相对父元素字体，而是相对当前元素自己的font-size；当前元素的字号如果又是em，才去看父元素。rem不受当前组件字号影响，只看根。- 把所有属性都换成
vw，用户放大字体时文字可能不跟着缩放。