CSS 容器查询实战：真正的组件级响应式

媒体查询的局限

传统的媒体查询基于视口宽度来应用样式，但在组件化开发中，同一个组件可能出现在不同宽度的容器中。

容器查询的语法

首先需要定义容器上下文，然后使用容器查询来根据容器尺寸调整样式。

实际应用场景

卡片组件是最典型的应用场景。同一个卡片组件在侧边栏中显示为紧凑模式，在主内容区显示为完整模式，无需额外的 class 控制。

目前主流浏览器已经全面支持容器查询，可以在生产环境中放心使用。