CSS Container Queries：真正的组件级响应式设计

为什么需要 Container Queries？

Media Queries 基于视口（viewport）尺寸，这在多列布局中会出现问题：同一组件在侧边栏（窄）和主内容区（宽）展示时，无法根据其容器宽度分别调整样式。

Container Queries 解决了这个问题。

基本语法

/* 定义容器 */
.card-container {
container-type: inline-size;
container-name: card;
}
/* 根据容器尺寸应用样式 */
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
@container card (max-width: 399px) {
.card {
display: flex;
flex-direction: column;
}
}

在 Tailwind CSS 中使用

Tailwind v3.2+ 原生支持 Container Queries：

<div class="@container">
<div class="@sm:grid @sm:grid-cols-2 flex flex-col">
<!-- 内容 -->
</div>
</div>

实际案例：自适应文章卡片

function ArticleCard({ article }) {
return (
<div className="@container">
<article className="
flex flex-col gap-3
@md:flex-row @md:gap-6
">
<img
className="w-full rounded-lg @md:w-48 @md:shrink-0"
src={article.cover}
/>
<div>
<h2 className="text-lg font-bold @md:text-xl">{article.title}</h2>
<p className="mt-2 text-sm text-muted-foreground">{article.excerpt}</p>
</div>
</article>
</div>
);
}

浏览器支持

目前 Chrome 106+、Safari 16+、Firefox 110+ 均已支持，覆盖超过 90% 的用户。

总结

Container Queries 是现代 CSS 的重要里程碑，配合 Tailwind 的 @container 变体可以写出真正可复用的响应式组件。