container queries 能解决 media queries 无法按组件容器尺寸响应的问题：media queries 仅响应视口宽度，而 container queries 让组件感知自身父容器宽度，实现同一组件在不同布局中自动适配，无需重复断点或 js 监听。
Container Queries 能解决 Media Queries 解决不了的什么问题
Media Queries 响应的是视口宽度，但组件真正需要适配的，是它被塞进去的那个父容器——比如一个 .card 在侧边栏里只有 280px 宽，在主内容区却有 1100px 宽。用 @media (min-width: 768px) 判断，两者都会走“大屏逻辑”，结果侧边栏里的文字撑出容器、按钮错位。
Container Queries 的核心价值就在这里：它让组件能“感知自己待的地方有多大”。不是“用户屏幕多宽”，而是“我这个卡片现在被装在多宽的盒子里”。
- 同一组件在不同布局位置自动切换样式，无需重复写断点或 JS 监听
- 不依赖全局视口状态，避免嵌套组件因外层媒体查询误触发内部响应
- 组件可独立打包、复用，比如把带
@container的卡片直接挪进另一个项目，只要父容器设了container-type，它就继续工作
必须显式声明 container-type 才生效
很多人写了 @container (min-width: 400px) { ... } 却没效果，根本原因是父容器没被识别为“可查询容器”。CSS 不会自动把每个 div 当成容器——你得明确告诉它：“这个元素要当容器用”。
container-type 至少要设为 inline-size（按宽度查询）或 size（宽高都参与查询），且该元素必须有布局上下文：
- 不能是
display: contents或display: none - 不能是未设置宽高的普通
div（浏览器无法计算其内联尺寸） - 推荐搭配
display: block、flex、grid或inline-block
示例：
.card-container {
container-type: inline-size;
width: 100%; /* 提供尺寸依据，否则可能无效 */
}
@container 规则不能嵌套，也不支持逻辑组合
和 @media 不同，@container 不能写成 @container (min-width: 400px) and (max-width: 800px)，也不能在另一个 @container 里面再写一层。它的语法更严格，只接受单个条件表达式。
常见错误现象：
- 浏览器忽略整个
@container块，控制台无报错但样式不生效 - DevTools 的 Styles 面板里看不到该规则，Computed 面板中也查不到 container 相关属性
调试建议：
- 打开 DevTools → Elements → 选中父容器 → 查看 Computed 标签页底部是否有
container-type和container-name - 在 DevTools 右侧的 Container query containers 区域确认该元素是否被识别为容器
- 优先用命名容器（如
container-name: card;）配合@container card (min-width: 400px)，避免多个容器冲突
浏览器兼容性仍是落地第一道门槛
截至 2026 年 5 月，Chrome 106+、Safari 16+、Firefox 110+ 已原生支持，但旧版 Edge（≤105）、iOS Safari ≤15.6、所有微信内置浏览器仍不支持。这意味着你不能只靠 @container 做唯一方案。
实际项目中的稳妥做法是渐进增强：
- 先用
@media写基础响应逻辑（保障降级可用） - 再叠加
@container覆盖更精细的组件内适配（如文字缩放、图标排列） - 避免用
cqw、cqh等逻辑单位做关键排版，它们的兼容性比@container本身还差一截
真正容易被忽略的点是：即使父容器设置了 container-type，如果子元素用了 position: absolute 或 transform: scale()，它可能脱离容器尺寸上下文，导致 @container 条件匹配失败——这时候得检查布局流是否被意外切断。
