容器查询正在取代媒体查询，因其能根据组件容器尺寸而非视口尺寸响应布局；需为容器设置container-type，再用@container定义内部断点，不支持伪元素。
为什么媒体查询正在“不够用”了
因为它是“看屏幕大小决定样式”，而真实场景里，同一个组件可能在宽屏主区和窄屏侧栏里同时存在——@media只能统一响应视口，没法让卡片在侧栏里自动切为竖排，在主区保持横排。
常见错误现象：.card在桌面端侧边栏被挤变形，开发者硬加@media (max-width: 768px)，结果主内容区的同个卡片也被强制改布局，逻辑错乱。
- 使用场景：组件复用率高的设计系统、Figma导出组件、微前端子应用嵌入
- 兼容性影响：Chrome/Edge 120+、Firefox 115+、Safari 17+ 已覆盖92.3%全球用户（2026年1月数据），可直接上线，无需Polyfill
- 性能影响：容器查询不触发重排，比JS监听
ResizeObserver轻量得多
怎么把媒体查询换成容器查询
核心就两步：声明容器、写容器内查询。不是替换，是升级——旧@media仍可保留做全局断点，新@container专管组件内部逻辑。
实操建议：
- 给组件容器加
container-type: inline-size;（只响应宽度变化）或container-type: size;（宽高都响应，慎用，开销略大） - 用
@container (width 代替@media (max-width: 600px)，注意括号里是容器尺寸，不是视口 - 别忘了加
container-name做隔离，比如container: card / inline-size;，避免子组件意外继承父容器查询规则
示例：
@layer
- 按优先级分三层：
@layer base, components, utilities; - 容器查询相关样式写进
@layer components;，确保它高于base（重置/基础样式），低于utilities（如.is-hidden这类强制覆盖类） - 避免在
@container块里用!important——它会破坏层叠层的控制意图
Skeleton框架里怎么安全接入容器查询
Skeleton当前基于浮动和固定断点，直接套用容器查询会因缺少container-type声明而完全失效，且grid和flex类名可能与新布局逻辑打架。
关键过渡步骤：
- 先在
skeleton.css顶部加@layer base;，把原有样式归入该层，为后续扩展留出层级空间 - 不要动原有
.container、.row等类，新建.c-card、.c-grid等带容器语义的类，并显式设container-type - 移动优先不是口号：侧边栏组件默认按窄容器写样式，再用
@container (width > 600px)升维，而不是反向降维
容易被忽略的一点：容器查询不支持伪元素（::before/::after）作为查询主体，所以别试图给.card::before加container-type——它根本不会生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
