# 概述 容器查询让样式基于容器尺寸而非视口，适合复杂网格与组件复用场景。 ## 语法（已验证） - 定义容器：`container-type: inline-size; container-name: card;` - 查询：`@container card (min-width: 480px) { /* styles */ }` ## 建议 - 与 `grid/flex` 结合设计组件断点；避免过度嵌套导致复杂性上升
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
# 概述 容器查询让样式基于容器尺寸而非视口，适合复杂网格与组件复用场景。 ## 语法（已验证） - 定义容器：`container-type: inline-size; container-name: card;` - 查询：`@container card (min-width: 480px) { /* styles */ }` ## 建议 - 与 `grid/flex` 结合设计组件断点；避免过度嵌套导致复杂性上升
发表评论 取消回复