容器查询（@container）是组件级响应式方案，需显式声明container属性启用，依据父容器尺寸而非视口调整样式，Chrome 105+等主流浏览器已原生支持。
容器查询（@container）不是媒体查询的“升级版”，而是解决完全不同的问题：它让卡片、列表、图表等组件能根据**自身父容器宽度**而不是整个浏览器窗口来响应，这才是真正意义上的组件级自适应。Chrome 105+、Firefox 110+、Safari 16+ 已原生支持，无需 polyfill。
怎么启用 container 查询上下文
容器查询不会自动生效，必须显式声明某个元素为“容器”——即设置 container 属性（或带名字的 container: card / inline-size）。这是最关键的前置步骤，漏掉就完全不触发。
-
container是一个简写属性，等价于container-type: inline-size; container-name: auto; - 若需多个容器类型共存（如同时响应宽度和高度），必须用命名方式：
container: card / inline-size，后续@container card (min-width: 400px)才能匹配 - 只对具有明确尺寸限制的元素有效：父容器需有
width、max-width、flex-basis或grid-template-columns等可测量的 inline-size；纯display: block+ 无宽高约束的 div 不会成为有效容器 - 常见踩坑：在 Flex 容器中直接给子项设
container，但该子项被min-width: auto（Flex 默认行为）卡住无法收缩 → 必须加min-width: 0
@container 规则写法与断点逻辑
@container 的语法和 @media 类似，但条件判断的是容器的 inline-size（默认）或 block-size，且不支持 orientation、prefers-color-scheme 等媒体特性。
- 基础写法：
@container (min-width: 300px) { .card { flex-direction: column; } } - 命名容器写法：
@container card (min-width: 550px) { .card { flex-direction: row; } } - 支持组合条件：
@container (min-width: 300px) and (max-width: 549px)，但不支持嵌套或逻辑非（not） - 断点值建议基于组件实际使用场景定，而非视口断点：比如侧边栏常为
300px，内容区卡片容器多为550px–800px，模态框内可能仅280px - 注意：
@container规则必须写在 CSS 文件中（或<style></style>标签内），不能用 JS 动态插入 style 字符串，否则不解析
容器查询 vs 媒体查询：什么时候该用哪个
两者不是替代关系，而是分工明确。混淆使用会导致布局错乱或冗余代码。
立即学习“前端免费学习笔记（深入）”；
- 用
@media控制**全局结构**：导航栏折叠/展开、主-侧边栏切换、整页字体缩放等依赖视口尺寸的逻辑 - 用
@container控制**组件内部形态**：同一张卡片在仪表盘侧边栏里堆叠显示，在主内容区里横向排列，在弹窗里精简为图标+文字 - 典型错误：给卡片写
@media (min-width: 768px) { .card { flex-direction: row; } }，结果在 1200px 宽视口下的 300px 宽侧边栏里仍强制横排 → 这正是容器查询要解决的问题 - 兼容性兜底：老浏览器不支持
@container，可用@supports (container-type: inline-size)包裹，内部写容器查询样式，外部保留媒体查询降级规则
图片和子组件在容器查询中的适配要点
容器查询生效后，组件内部的图片、按钮、文字等也需要同步响应，否则会出现“容器缩了但图片没缩”“文字溢出”等问题。
- 图片必须保持
max-width: 100%+height: auto，且父容器不能有固定height（除非用aspect-ratio或padding-top模拟） - Flex/Grid 子项若设置了
min-width: auto（Flex 默认），会在小容器中撑开 → 显式加min-width: 0或overflow: hidden - 文字行数控制慎用
display: -webkit-box，它不响应容器尺寸变化；改用line-clamp配合容器查询断点分层截断 - 避免在
@container内部再嵌套媒体查询——这会让逻辑耦合且不可预测；所有响应应基于同一维度（容器尺寸）推导
最易被忽略的是容器本身是否真的具备可测量的 inline-size：一个 div 即使写了 container，如果它的父级是 display: flex 且未设 flex-basis 或 width，它就永远得不到有效尺寸，@container 规则形同虚设。
