引言
在CSS Container Queries出现之前，开发者只能依赖视口宽度（viewport width）来调整布局，这导致组件在不同容器中无法智能适应。2023年，所有主流浏览器均实现了对CSS Container Queries的支持，这场组件级响应式革命的成熟时机已经到来。
为什么需要Container Queries
假设一个卡片组件，在侧边栏中显示为单列，在三栏布局中显示为两列。传统方案使用JavaScript监听resize事件或依赖CSS hack，既不优雅也不可靠。Container Queries让组件能够根据其容器尺寸而非视口尺寸进行自适应。
核心概念
Container Queries围绕三个要素构建：contain属性定义查询容器，container-type指定查询维度，container-name命名容器空间。@container规则内的样式仅在条件满足时应用。
实战示例
开发者需要在父元素建立container上下文，然后在@media类似的@container规则中定义断点。这种模式简化了组件设计，提高了代码的可维护性和复用性，并且无需JS介入。
发表评论 取消回复