2026-07-09 学习笔记

CSS 容器查询

今天深入学习了 CSS Container Queries，这个特性期待已久。

媒体查询 vs 容器查询

/* 媒体查询 - 基于视口 */
@media (min-width: 768px) {
  .card { flex-direction: row; }
}

/* 容器查询 - 基于父容器 */
@container (min-width: 500px) {
  .card { flex-direction: row; }
}

关键区别：容器查询让组件根据父容器尺寸自适应，而不是整个页面宽度。

实际应用场景

在组件化开发中，同一个卡片组件可能出现在：

• 侧边栏（窄）
• 主内容区（宽）
• 弹窗（可变宽度）

用媒体查询需要为每个场景写断点，而容器查询让组件自己决定怎么布局。

兼容性

2026 年所有主流浏览器都已支持，可以放心使用了。

/* 降级方案 */
@supports (container-type: inline-size) {
  .wrapper { container-type: inline-size; }
}

---

容器查询是 CSS 近年来最实用的特性之一，建议在新项目中积极使用。