深入理解 CSS 容器查询:从媒体查询到组件级响应式设计
媒体查询一直是响应式网页设计的基石,但它只能感知视口尺寸,无法根据组件自身可用空间调整样式。设想一个卡片组件,在侧边栏中需要竖排紧凑布局,在主内容区中又希望横排展示。用媒体查询要么写一堆全局断点耦合布局假设,要么干脆放弃组件复用。容器查询(Container Queries)正是为解决这个问题而进入 CSS 标准的。它允许开发者声明一个包含上下文,让内部元素依据该容器的尺寸而非视口来应用样式。现代浏览器对容器查询的支持已经覆盖 Chrome 105+、Safari 16+ 和 Firefox 110+,在生产环境里配合渐进增强策略可以放心使用。下面从核心语法、容器单位、实际案例以及与媒体查询的...