容器查询

媒体查询观察视口，容器查询观察组件所在的查询容器。组件被放进侧栏、主内容或弹窗时，可以根据自己的可用宽度改变布局，不必为每个页面组合复制断点。

.card-list { container-type: inline-size; }
.card { display: block; }
@container (min-width: 36rem) {
  .card { display: grid; grid-template-columns: 12rem 1fr; }
}

查询容器必须由祖先明确建立，查询条件的参考对象不是组件自身的最终宽度。容器查询解决组件对空间的适应，媒体查询仍适合页面级导航、用户偏好和设备能力；两者可以叠加。

实验与练习

准备两个宽度不同的父容器，把同一张卡片分别放入其中。记录卡片从单列切换到两列的容器宽度，而不是记录视口宽度；移除 container-type 后应回到基础单列布局。

可运行微实验：容器查询的最小闭环

<div class="rail"><article class="card"><img src="avatar.jpg" alt=""><div><h2>卡片标题</h2><p>说明文字</p></div></article></div>
<div class="main"><article class="card"><img src="avatar.jpg" alt=""><div><h2>卡片标题</h2><p>说明文字</p></div></article></div>
<style>
.rail, .main { container-type: inline-size; resize: horizontal; overflow: auto; border: 1px solid; padding: 1rem; }
.rail { width: 16rem; } .main { width: 36rem; }
.card { display: block; } .card img { width: 100%; max-width: 12rem; }
@container (min-width: 30rem) { .card { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; } }
</style>

拖动两个容器分别越过 30rem，记录只有宽容器切换布局；删除 .rail, .main 的 container-type 后，@container 规则不再生效。媒体查询可以另行控制页面级导航，不应被混入这个组件实验。

常见错误

• 忘记设置查询容器却只写 @container。
• 把容器查询当成自动测量组件内容的脚本。
• 用容器查询解决本应由全局用户偏好决定的动画和颜色。

继续阅读

下一篇整理现代布局相关特性：现代布局特性。

练习

1. 用最小输入复现“容器查询”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案