container-queries 更适合文字缩放，因其响应容器宽度而非视口宽度，语义更准确；需显式设置 container-type: inline-size 启用，配合 clamp() 与 cqw 单位实现平滑缩放，并同步调整 line-height、font-weight 和 letter-spacing。
container-queries 为什么比 media queries 更适合做文字缩放
因为 media queries 响应的是视口宽度，而文字缩放真正需要响应的是它所在容器的宽度——比如一个卡片组件在不同布局中可能被塞进 300px 宽的 sidebar，也可能撑满 1200px 的主内容区。用视口判断会误判，导致文字在窄容器里过大、宽容器里过小。
而 container queries 允许你为某个元素（如卡片）声明 container-type: inline-size，之后它的子元素就能用 @container 按该容器的实际内联尺寸做条件样式，这才是语义正确的缩放依据。
必须显式设置 container-type 才能启用查询
浏览器默认不把任何元素当成容器，即使你写了 @container 规则，没声明 container-type 就完全不生效，控制台也不会报错，容易误以为语法写错了。
实操要点：
- 目标容器（如
.card）必须设置container-type: inline-size（或size，但后者需同时有宽高，多数文字缩放只需内联方向） - 不能写在伪元素或
display: contents元素上——它们不产生盒模型，无法作为容器 - 若容器是 flex/grid 子项，确保父容器没用
overflow: hidden或contain: layout干扰其尺寸计算（极少数情况下会抑制 container query 计算）
用 clamp() 配合 container queries 实现平滑缩放
直接在 @container 里写多个 font-size 断点容易漏覆盖、维护难；更稳的方式是让 clamp() 的上下限随容器宽度动态变化，再用 @container 控制不同区间内的缩放斜率。
示例：让标题在容器 300–800px 宽时，字号从 1.2rem 线性缩放到 2.4rem
.card {
container-type: inline-size;
}
.card h2 {
font-size: clamp(1.2rem, 1.2rem + 2vw, 2.4rem);
}
@container (min-width: 300px) {
.card h2 {
font-size: clamp(1.2rem, 0.8rem + 0.005cqw, 1.8rem);
}
}
@container (min-width: 600px) {
.card h2 {
font-size: clamp(1.4rem, 1.0rem + 0.004cqw, 2.4rem);
}
}
注意：cqw 是 container query width 单位，1cqw = 容器当前宽度的 1%，它只在 @container 规则内有效；2vw 这类视口单位在 container query 中仍可用，但会失去上下文意义，慎用。
字体缩放后行高、字重等需同步调整
只调 font-size 很容易导致小尺寸下文字挤在一起、大尺寸下留白过多——这是实际项目中最常被忽略的一环。
建议同步控制：
-
line-height：用无单位值（如1.3）最安全；若需更精细，可搭配clamp()，例如line-height: clamp(1.2, 1.2 + 0.001cqw, 1.5) -
font-weight：小尺寸时加粗（如从 400 → 500）提升可读性，大尺寸时可略降（400 → 300）避免视觉压迫 -
letter-spacing：小尺寸收紧（-0.01em），大尺寸微松（0.02em），防止小字糊成一团
这些属性本身不触发重排，但组合使用时要注意：如果容器宽度变化频繁（如拖拽侧边栏），连续重绘可能影响性能，建议对非关键文本加 will-change: font-size 提前提示渲染引擎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
