@media 的问题是只认视口：一个卡片组件在桌面两栏布局里只有 400px 宽，但视口是 1920px，于是组件被迫应用「桌面样式」挤成一团。容器查询让卡片根据自己容器的宽度决定排版——真正的组件级响应式。
用法：先给容器 container-type: inline-size（按宽响应），再写 @container (min-width: 480px) { .card { ... } }。浏览器支持已达标（2023 后全绿），做组件库时优先考虑。
<style> .stage { container-type: inline-size; resize: horizontal; overflow: auto; border: 2px dashed #e78a3e; padding: 10px; min-width: 240px; max-width: 100%; } .card { padding: 12px; border-radius: 8px; background: #21262d; color: #e6edf3; } @container (min-width: 420px) { .card { display: flex; gap: 12px; background: #4a9eff; } } /* 容器够宽时变横向卡片 */ </style> <div class="stage"> <div class="card">拖动右下角改变容器宽度 × 看我切换布局</div> </div>