如何使用CSS Container Queries根据父容器大小重排卡片-css教程-PHP中文网

container queries 与 media queries 的本质区别在于查询目标不同：前者查父容器尺寸（需显式声明 container-type），后者查视口；卡片据此独立响应所在容器宽度，实现更精细的布局控制。

如何使用css container queries根据父容器大小重排卡片

Container Queries 和 media queries 本质区别在哪

不是“换了个写法的响应式”，而是查询目标变了：@container 查的是父容器的尺寸（比如一个 .card-grid），@media 查的是视口。这意味着卡片能独立响应自己所在容器的宽度，而不是整个屏幕——比如侧边栏收起时，主内容区变窄，里面的卡片自动从三列变两列，而右侧广告位不受影响。

关键前提：父容器必须显式声明为 container context，否则子元素的 @container 规则完全不生效。

必须加 container-type 才能启用查询

浏览器默认不把任何元素当作 container，得手动开启。最常用的是 container-type: inline-size，表示只关心容器的行内方向（通常是宽度）变化。高度查询（size）目前支持度差，别用。

container-name 可选，但建议加上——避免不同层级的 container 冲突，也方便调试
命名后，子元素里用 @container card-layout 就能精准匹配，不加 name 则用 @container 匹配任意已声明的 inline-size 容器
别在 display: inline 或无尺寸的元素上设 container，它需要有明确的 layout box

/* 正确：给网格容器声明 container */
.card-grid {
  container-type: inline-size;
  container-name: card-layout;
}

卡片内部用 @container 写断点，不是 @media

子卡片里写 @media 没用——它还是查视口。必须用 @container，且规则写在卡片自身样式里（不是父容器里）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

断点值是相对于父容器宽度的，单位只能是 px、em、rem，不支持 % 或 vw
常见误写：@container (min-width: 400px) —— 这会匹配所有宽度 ≥400px 的 container，但你可能只想匹配叫 card-layout 的那个
推荐写法：@container card-layout (min-width: 400px)，明确绑定 name

.card {
  width: 100%;
}
@container card-layout (min-width: 400px) {
  .card { width: calc(50% - 12px); }
}
@container card-layout (min-width: 600px) {
  .card { width: calc(33.333% - 16px); }
}