container-queries 生效的前提是父容器显式声明 container-type，最常用的是 inline-size；未设置则样式完全不生效，且不能继承，flex/grid 子项需额外添加；仅支持离散断点切换，需成对调整 font-size 和 line-height。
container-queries 要求父容器显式声明 container-type
直接写 @container 但没给父元素设 container-type，样式完全不生效——这是最常卡住的地方。浏览器根本不会把普通 div 当作可查询容器。
必须手动指定容器类型，最常用的是 container-type: inline-size（响应宽度变化），例如：
<div class="text-container"> <p class="auto-shrink">这是一段可能超长的文字</p> </div>
对应 CSS：
.text-container {
container-type: inline-size;
}
<p>@container (width </p><p>@container (width >= 300px) and (width </p>
-
container-type必须设在直接父容器上，不能靠祖先元素“继承” - 不支持
container-name的话，就别写名字，用匿名容器更稳妥 - Flex 或 Grid 子项默认不是块级容器，若父元素是
display: flex，需额外加container-type才生效
文字自动收缩不是“缩放”，而是分档控制 font-size 和 line-height
没有 scale() 或动态计算字体的原生机制，@container 只能触发离散样式切换。想实现“随容器变窄字体渐小”，得手动定义多档断点。
常见错误是只调 font-size 却忽略 line-height，导致小字号下文字挤在一起。建议成对调整：
@container (width @container (width >= 200px) and (width
- 断点数量取决于内容长度和最小可读字号，通常 3–4 档足够覆盖手机到卡片尺寸
- 避免用
em或rem作为font-size单位，容易叠加缩放，优先用px或clamp()配合 -
letter-spacing在小字号时微调能显著提升可读性，别忽略
兼容性：Chrome 117+、Firefox 119+、Safari 17.4+ 支持，旧版 Safari 需降级 fallback
查 Can I Use 就知道，@container 在 Safari 17.4 才真正稳定，此前版本（包括 17.0–17.3）存在容器尺寸误判或规则不触发的问题。
生产环境必须加降级方案，比如用传统媒体查询兜底：
@media (max-width: 400px) {
.auto-shrink {
font-size: 12px;
line-height: 1.2;
}
}
<p>@container (width 新式规则，覆盖媒体查询 /
.auto-shrink {
font-size: 11px;
line-height: 1.15;
}
}</p>
- 不要依赖
@supports (container-type: inline-size)做全量开关——它在 Safari 17.0–17.3 返回 true，但实际不工作 - 真要检测可用性，得用 JS 测
window.CSS.supports('container-type', 'inline-size')并结合 UA 判断 Safari 版本 - 服务端渲染场景下，首次 HTML 输出无法预知容器尺寸，务必保证降级样式能立即生效
容器尺寸受 overflow 和 box-sizing 影响，别让 padding/scroll 挤占可用宽度
如果 .text-container 有 padding 或 border，而你又用了 box-sizing: content-box（默认值），@container 查询的宽度会包含 padding，导致断点偏移。
更隐蔽的问题是 overflow: hidden 或 auto 触发滚动条占位，尤其在 Windows 上，竖向滚动条宽约 16px，会让容器“看起来”比实际窄。
- 统一设
box-sizing: border-box，让width查询值等于视觉宽度 - 若容器可能溢出，用
overflow: clip替代hidden，避免滚动条干扰尺寸计算 - 测试时打开浏览器开发者工具的“Toggle device toolbar”，选真实设备（如 iPhone SE），别只靠缩放窗口模拟
容器查询的“自动”是条件触发，不是实时流式缩放；真正难的是断点设计和 fallback 的平滑衔接，而不是语法本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
