CSS Container Queries 终于可以放心用了

等了好久的 CSS Container Queries 终于可以在生产环境放心用了！浏览器支持率已经超过 95%，包括 Chrome、Firefox、Safari 和 Edge 最近的版本。 ## 解决了什么问题 以前的 Media Queries 只能根据**视口大小**来调整样式，但实际开发中我们经常需要根据**容器大小**来响应。 比如一个卡片组件，在侧边栏里要窄版布局，在主内容区要宽版布局。用 Media Queries 你得知道侧边栏在什么屏幕宽度下出现，然后写一堆断点。但如果布局变了，所有断点都要改。 ## Container Queries 怎么用 ```css /* 1. 声明容器 */ .card-container { container-type: inline-size; container-name: card; } /* 2. 根据容器宽度调整样式 */ @container card (min-width: 400px) { .card { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; } } @container card (max-width: 399px) { .card { display: flex; flex-direction: column; } .card img { width: 100%; } } ``` 卡片不关心自己在页面的哪个位置，只关心自己的容器有多宽。这样组件就真正做到了"自适应"。 ## 最适合的场景 1. **卡片组件**：同一个卡片在不同列数的网格里自动调整布局 2. **侧边栏/主内容**：面板折叠时内部组件自动切换紧凑模式 3. **仪表盘**：可拖拽调整大小的 widget 4. **Design System**：组件不再依赖外部断点，真正独立可复用 ## 和 Media Queries 的关系 Container Queries 不是 Media Queries 的替代品，两者配合使用： - **Media Queries**：控制页面级别的布局（几列布局、侧边栏显隐） - **Container Queries**：控制组件级别的响应式（组件内部如何布局） ## 注意事项 - `container-type: inline-size` 会创建一个新的包含块，可能影响 `position: absolute` 子元素的定位 - 不能查询自身的大小，只能查询祖先容器的大小 - 性能方面基本没有问题，浏览器做了很好的优化 总的来说，Container Queries 是 CSS 近几年最实用的新特性之一。如果你还没开始用，现在就是最好的时机。