【前端】每日一道面试题4：什么是CSS容器查询（Container Queries）？与媒体查询有何区别？

CSS容器查询（Container Queries）是CSS的一项新特性，允许开发者根据元素所在容器的尺寸或样式变化来动态调整其内部元素的布局和样式。与传统的媒体查询（基于视口或设备特性）不同，容器查询实现了组件级别的响应式设计，使组件能够独立适应其所在容器的实际尺寸和上下文环境。

---

CSS容器查询的核心概念

1. 容器注册

   通过为父元素设置container-type（如inline-size或size）和container-name属性，将其定义为"容器"。例如：

   .parent {
     container-type: inline-size;  /* 基于宽度查询 */
     container-name: my-container;
   }

2. 条件样式应用

   使用@container规则，根据容器的尺寸或自定义属性匹配条件。例如，当容器宽度大于600px时调整子元素布局：

   @container my-container (min-width: 600px) {
     .child { 
       flex-direction: row;
     }
   }

3. 逻辑单位支持

   提供与容器尺寸相关的单位（如cqw、cqh），以及逻辑方向单位（如cqi表示内联尺寸），实现更精确的响应式设计。

---

容器查询与媒体查询的区别

特性	容器查询	媒体查询
查询对象	父容器的尺寸或样式	视口、设备类型或特性（如屏幕方向）
应用场景	组件内部的动态布局调整	全局页面布局适配不同设备
模块化支持	组件可独立响应容器变化，复用性高	依赖全局视口，可能影响其他组件
语法结构	需先定义容器，再用@container规则	直接使用@media规则
浏览器支持	较新（Chrome 106+、Safari 16+等）	广泛支持（所有现代浏览器）

---

实际应用场景对比

• 容器查询 ：

  适合组件在复杂布局中的自适应。例如，侧边栏中的卡片在窄容器中切换为垂直布局，而在宽容器中显示为水平布局。

• 媒体查询 ：

  适合全局布局调整。例如，为移动设备隐藏侧边栏，或在大屏幕上增加网格列数。

---

为何选择容器查询？

1. 组件独立性：组件无需依赖全局视口，可在任何容器内自适应，例如电商网站的"加入购物车"按钮根据容器宽度显示图标或文字。
2. 代码维护性：减少全局断点，CSS更聚焦于组件自身逻辑。
3. 未来趋势：随着组件化设计和原子化CSS的普及，容器查询成为实现"内在设计"（Intrinsic Design）的关键工具。

---

兼容性与实践建议

• 渐进增强：在支持容器查询的浏览器中使用，同时保留媒体查询作为降级方案。
• 工具链适配：结合现代框架（如React、Vue）的组件化开发模式，提升代码可维护性。

总结来说，媒体查询适用于宏观布局适配，而容器查询更擅长微观组件的动态响应。两者可结合使用，构建兼顾全局与细节的响应式设计系统。