深入理解 CSS 容器查询：从媒体查询到组件级响应式设计

媒体查询一直是响应式网页设计的基石，但它只能感知视口尺寸，无法根据组件自身可用空间调整样式。设想一个卡片组件，在侧边栏中需要竖排紧凑布局，在主内容区中又希望横排展示。用媒体查询要么写一堆全局断点耦合布局假设，要么干脆放弃组件复用。容器查询（Container Queries）正是为解决这个问题而进入 CSS 标准的。它允许开发者声明一个包含上下文，让内部元素依据该容器的尺寸而非视口来应用样式。现代