Container Queries 不生效是怎么回事？

夏侯馨冉提问于 2026-03-23 14:02:26 阅读 13

移动

我在用 Container Queries 做一个卡片组件，希望它在不同容器宽度下自动调整样式，但写了 @container 规则后完全没反应。是不是漏了什么关键设置？

我已经给父容器加了 container-type: inline-size，子元素也用了 @container (min-width: 300px)，但无论怎么缩放浏览器窗口，样式都不变。

.card-container {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card-title {
    font-size: 1.5rem;
  }
}

我来解答赞 5 收藏

反馈

1 条解答

爱学习的春凤 Lv1

Container Queries 这东西确实有点 tricky，容易踩坑。你提到的问题，可能是 @container 规则写的位置不对或者选择器有问题。

首先，确保你的 @container 规则放在全局作用域里，而不是嵌套在某个 CSS 规则块里。CSS 目前不支持在嵌套规则里定义 @container。

其次，检查一下你的选择器。@container 规则里的选择器要能匹配到实际的 DOM 元素。你可以试试这样改一下：

.card-container {

  container-type: inline-size;

}



.card-container @container (min-width: 300px) {

  .card-title {

    font-size: 1.5rem;

  }

}

这里的关键是把 @container 放在 .card-container 的作用域里，但仍然是全局作用域的一部分，而不是嵌套在 .card-container 里。这样应该能解决问题。

另外，记得检查浏览器支持情况，Container Queries 目前还在实验阶段，不是所有浏览器都支持。如果测试环境有问题，可以考虑用一些 polyfill 或者降级方案。

2026-03-23 14:03