rem适合全局缩放，需动态控制根字号（如clamp或js）；em适合局部缩放，但嵌套易失控，仅用于需随自身字号变化的属性（如图标、行高），混用会导致参照系混乱。
rem 和 em 在响应式中到底怎么选
rem 更适合做全局缩放控制，em 更适合局部嵌套缩放。如果你改了 html 根元素的 font-size，所有用 rem 的尺寸会同步变化；而 em 会逐层继承父级字号，容易在多层嵌套时失控。
实际项目中建议：用 rem 控制间距、字体、容器尺寸等基础布局单位；仅在需要“随当前文字大小缩放”的场景（比如按钮内图标、行内提示）才用 em。
-
rem配合媒体查询动态设置html { font-size: 16px; }是最稳的响应式基线方案 - 避免在
em中混用不同层级的字号，否则2em可能是 32px，也可能是 48px，调试困难 - 现代框架如 Tailwind 默认以
rem为基准，不是偶然——它更可预测
vw/vh 单位该不该用，用在哪
vw 和 vh 直接绑定视口宽高，对全屏组件、横幅图、视差滚动非常友好，但对常规内容区域要谨慎。
常见误用是拿 width: 100vw 做容器宽度——这会导致水平滚动条，因为没算垂直滚动条宽度（尤其在 Safari 中）。真正安全的写法是 width: 100% 或 width: 100svw（需检查浏览器支持）。
- 适合场景：
height: 100vh做首屏满屏展示、max-width: 80vw限制大图宽度、font-size: 4vw做标题流体缩放（配合clamp()更佳） - 不推荐用于 padding/margin，因为小屏下可能压缩到 0，破坏可读性
- 注意
vmin/vmax在折叠屏或横竖屏切换时更稳定，但兼容性略低（iOS 15+ / Chrome 89+）
百分比单位（%）现在还值得依赖吗
百分比仍是流式布局的底层支柱，但它不是“万能自适应”——它的行为高度依赖父容器是否具有明确尺寸。
比如 width: 50% 在父容器 width: auto（如未设宽的 div）下依然有效；但 padding-top: 20% 永远相对于父容器的 width，哪怕你本意是按高度缩放。
- 安全用法：子容器宽度/最大宽度、Flex/Grid 项目
flex-basis、表格列宽 - 危险用法：
height: 50%（父容器无显式height时无效）、margin-bottom: 10%（易导致意外空白） - 替代方案：用
aspect-ratio替代 padding-top hack 做响应式比例容器（Chrome 88+/Firefox 89+ 支持良好）
clamp() 函数正在取代很多传统单位组合
clamp(min, preferred, max) 是目前解决“移动端小、桌面端大、中间平滑过渡”的最简洁方案，比如 font-size: clamp(1rem, 2.5vw, 1.5rem)。
它不是弹性单位，但能封装 rem + vw 的逻辑，避免写一堆媒体查询。注意：IE 完全不支持，且 Safari 对 clamp() 内嵌函数（如 calc()）的支持曾有 bug（已修复至 Safari 15.4+）。
- 典型组合：
clamp(1rem, 4vw, 1.75rem)控制正文标题、clamp(0.75rem, 2.2vw, 1.125rem)控制段落行高 - 别在
clamp()里用em，容易因继承链导致计算偏差 - 和
rem搭配使用时，min和max建议统一用rem，preferred用vw，语义清晰
font-size 同时受根字号、clamp()、用户系统字号设置三重影响，调试时得一层层关掉变量看效果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
