别再像对待传统媒体查询那样对待 CSS 容器查询
内容提要
容器查询浏览器支持率已达94%，但仅41.4%开发者实际使用，且常被误用为媒体查询。媒体查询面向视口，适合页面级宏观布局；容器查询面向组件容器，适合卡片、表单等微观布局。它支持cqi等单位实现组件内流式排版，还能检测Flex换行，但需额外包裹元素、查询块尺寸可能塌陷、不支持自定义属性。组件多语境复用时用容器查询，页面级布局仍用媒体查询。
延伸解读
容器查询的采用困境与常见误区
尽管容器查询的浏览器支持率已达94%，但State of CSS调查显示仅41.4%的开发者实际使用。许多开发者误将其视为媒体查询的替代品，导致使用方式错误。文章指出，这种低采用率与高支持率的不匹配，源于对两者本质区别的误解。正确理解容器查询的适用场景，是提升组件响应式能力的关键。
媒体查询与容器查询：宏观与微观的分工
媒体查询面向视口，适用于页面级宏观布局，如整体网格、页头页脚；容器查询面向组件容器，适用于卡片、表单等微观布局。文章强调，不应让组件仅因视口宽度变化而改变布局，而应基于其可用空间自适应。这种分工有助于构建更灵活、可复用的组件。
容器查询的独特能力与实用技巧
容器查询支持cqi等单位，可实现组件内流式排版，使字体大小随容器缩放。此外，它还能通过嵌套检测Flex换行，无需JavaScript即可在项目换行时触发样式变化。这些能力让组件能更智能地响应内部布局状态，提升开发效率与用户体验。
使用容器查询的注意事项与限制
容器查询需额外包裹元素，因为容器不能查询自身；查询块尺寸时若未设置高度可能导致布局塌陷，建议优先使用inline-size；此外，容器查询不支持自定义属性，无法使用var()定义断点。了解这些限制有助于避免常见陷阱，更稳妥地应用容器查询。
Q&A
CSS容器查询和媒体查询的核心区别是什么？
媒体查询面向视口，根据屏幕宽度等外部条件应用样式，适合页面级宏观布局；容器查询面向组件容器，根据组件可用空间应用样式，适合卡片、表单等微观布局。
为什么容器查询的浏览器支持率很高，但实际使用率却很低？
容器查询浏览器支持率约94%，但State of CSS调查显示仅41.4%的开发者实际使用。主要原因是开发者容易将其误认为媒体查询，以为用法和用途相同，导致 adoption 低。
在组件中如何用容器查询实现流式排版？
使用容器查询单位如cqi，结合clamp()函数，例如：.card-title { font-size: clamp(1rem, .5rem + 3cqi, 2rem); }，使字体大小随组件容器宽度缩放，而非视口。
容器查询有哪些常见的副作用或限制？
主要限制包括：需要额外包裹元素（容器不能查询自身）；查询块尺寸可能导致高度塌陷为0；不支持自定义属性作为查询条件。
什么时候应该用容器查询，什么时候用媒体查询？
当组件在多个布局上下文中复用（如卡片出现在网格或侧边栏）时用容器查询；当组件仅存在于页面级（如主导航）时用媒体查询。即宏观布局用媒体查询，微观布局用容器查询。
容器查询能检测Flexbox换行吗？如何实现？
可以，通过将Flex项目注册为容器（container-type: inline-size），并设置flex-grow: 1，当项目换行后宽度扩展，容器查询触发，从而应用新样式，无需JavaScript。
