DEV Community
·
为什么每个人都在谈论CSS容器查询（以及如何使用它们）
💡
原文英文，约300词，阅读约需2分钟。
📝
内容提要
容器查询是CSS布局的一项创新，允许元素根据父容器的大小调整样式，解决了可重用组件在不同环境中的不一致表现。除iOS 15及更早版本的Safari外，所有主要浏览器均支持此功能。
🎯
关键要点
- 容器查询是CSS布局的一项创新，允许元素根据父容器的大小调整样式。
- 传统的媒体查询仅考虑视口大小，无法处理可重用组件在不同环境中的表现。
- 容器查询通过询问'我的容器有多大？'来调整样式，而不是依赖于全局断点。
- 使用容器查询，可以轻松实现组件在不同布局中的适应性，而无需复杂的媒体查询。
- 所有主要浏览器（除iOS 15及更早版本的Safari外）均支持容器查询。
- 容器查询使得构建真正响应式的组件成为可能，而不仅仅是页面。
❓
延伸问答
什么是CSS容器查询？
CSS容器查询是一种布局创新，允许元素根据其父容器的大小调整样式。
容器查询与传统媒体查询有什么区别？
容器查询根据父容器的大小调整样式，而传统媒体查询仅考虑视口大小。
容器查询的使用场景是什么？
容器查询适用于需要在不同布局中自适应的可重用组件，如在侧边栏和主内容区域中表现不同的卡片。
如何实现CSS容器查询？
首先定义一个容器，然后使用@container规则根据容器的宽度编写样式。
哪些浏览器支持CSS容器查询？
所有主要浏览器都支持CSS容器查询，除了iOS 15及更早版本的Safari。
使用容器查询有什么好处？
使用容器查询可以构建真正响应式的组件，简化样式调整，避免复杂的媒体查询。
➡️
