CSS如何根据父级容器宽度调整子项_利用容器查询container选择器css

容器查询必须先声明container-type，否则@container规则无效；仅inline-size广泛支持；不可用于:root或body；禁用em/rem等相对单位；推荐px单位；container-name实现命名隔离；Chrome105+等主流浏览器原生支持。container查询必须先声明container-type不加container-type，@container规则完全无效——浏览器直接忽略，连报错都不会有。这是最常被跳过的一步。必须在父容器上显式设置container-type: inline-size（或size，但后者需同时设container-name且兼容性更差）inline-size是目前唯一广泛支持的取值，覆盖宽度变化场景；size要等宽高都变化才触发，实用性低不能写在:root或body上——body默认不是格式化上下文，多数情况下不生效；推荐用div、section等块级容器如果父容器是display: flex或grid，需确认它没被压缩（比如子项设了flex-shrink: 0但父容器没设min-width），否则实际可查询宽度可能远小于视觉宽度@container里不能用em/rem/vw等相对单位容器查询的断点单位只能是px、%（仅当父容器有明确宽度时）、ch等基于容器自身尺寸的单位。用em或rem会退化为视口基准，失去“响应父容器”的意义。错误写法：@container (min-width: 30em) —— 这里的em按根字体大小算，和容器无关正确写法：@container (min-width: 480px) 或 @container (min-width: 50%)（前提是父容器本身宽度固定或受约束）%容易踩坑：如果父容器宽度由内容撑开（如width: max-content），50%可能等于0px；建议优先用pxChrome 110+ 支持cap、ic等新单位，但 Safari / Firefox 尚未跟进，生产环境慎用container-name用于多容器嵌套隔离当一个页面里有多个可查询容器，又想让某条@container规则只作用于特定容器时，container-name就是唯一可控手段。给父容器设container-name: sidebar，然后写@container sidebar (min-width: 320px) { ... }，这条规则就只对这个命名容器生效不命名的容器默认属于匿名组，所有匿名@container规则都会匹配它们——容易误触发命名不区分大小写，但建议全小写+短横线，避免和自定义属性冲突同一元素可以有多个名字：container-name: header, nav，对应多个@container块兼容性现状和降级方案Container Queries 在 Chrome 105+、Edge 105+、Safari 16.4+ 原生支持；Firefox 119+ 开始支持，但需手动开启layout.css.container-queries.enabled标志（不稳定）。没有polyfill能真正模拟容器查询逻辑。 There’s An AI For That 全球领先的 AI 聚合器，收集10,225个AI工具，可用于超过2,548个任务。