Container Queries 与 media queries 的本质区别在于响应依据不同：前者基于父容器尺寸，后者基于视口宽度；Container Queries 实现组件级响应式，使同一组件在侧边栏、主区或弹窗中能根据实际容器宽度自动适配布局，而 media queries 无法感知容器环境变化。
Container Queries 和 media queries 本质区别在哪
Container Queries 不是媒体查询的升级版，它不看视口宽度，而是看容器自身尺寸。卡片组件常嵌套在不同宽度的栅格、侧边栏或弹窗里，media 查询只能响应整个屏幕变化，而 @container 才能真正让单个卡片“感知”自己被塞进了多宽的父容器里。
关键前提：必须给卡片的直接父元素显式声明 container-type，否则所有 @container 规则都会静默失效。
- 父容器没设
container-type: inline-size→ 卡片里的@container (min-width: 300px)完全不触发 -
container-name可选，但命名后能避免规则污染（尤其多个卡片共用同一父容器时） - 不能写在
<style>标签外（比如 HTML 内联 style），必须在 CSS 文件或<style>块内
给卡片组件写一个可缩放的标题行布局
常见需求：卡片标题在窄容器中显示为单行，在宽容器中显示为两行并加副标题。用 @container 比用 JS 监听 resize 或一堆 @media 更轻量、更解耦。
假设卡片结构是：
立即学习“前端免费学习笔记（深入）”；
<div class="card-container">
<article class="card">
<h3 class="card-title">标题</h3>
</article>
</div>
对应 CSS：
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 320px) {
.card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@container card (min-width: 480px) {
.card-title::after {
content: " — 副标题";
font-size: 0.8em;
color: #666;
}
}
-
@container后面跟的是容器名（card）而非选择器，名字必须和container-name一致 - 单位统一用
px，不要混用em或rem——容器查询目前只支持px、%（仅用于aspect-ratio）等有限单位 - 伪元素
::after在容器查询中可用，但注意它受容器尺寸限制，超出部分会被裁剪
为什么卡片内图片没随容器缩放
图片默认不响应 @container，因为 <img> 是替换元素，其尺寸由自身 intrinsic size 或显式 width 控制。想让它随容器变，得主动干预。
- 给图片加
width: 100%+height: auto是基础，否则它卡死在原始像素宽 - 如果卡片有
padding，图片会撑满内容区，但可能溢出；建议用box-sizing: border-box确保 padding 不影响 width 计算 - 避免对
<img>直接写max-width: 100%—— 它只在块级上下文中生效，而容器查询作用域内需明确设置display: block - 若用
background-image，记得配合background-size: cover和aspect-ratio控制缩放行为
兼容性与降级方案怎么写才不翻车
Chrome 105+、Firefox 117+、Safari 16.4+ 支持，但 Safari 对 container-name 的解析稍慢，且不支持嵌套容器查询。降级不是“加个 @media 覆盖就行”，而是要确保无容器查询时卡片仍可用。
- 先写默认样式（小屏优先），再用
@supports (container-type: inline-size)包裹增强逻辑 - 不要把关键布局（如 flex 方向、grid 列数）全押在
@container上，至少保留一套@mediafallback - Safari 16.4 下
container-name若含空格或特殊字符会失效，只用字母数字和短横线 - 构建工具（如 PostCSS）暂无成熟插件模拟容器查询，别指望自动 polyfill
最易被忽略的一点：容器查询只响应尺寸变化，不响应内容增减。如果卡片内部文本动态插入导致高度突变，但宽度没变，@container 不会重计算——这时候得靠 ResizeObserver 补位，而不是硬塞进 CSS 里。
