容器查询 container
媒体查询只能问“视口多宽”，容器查询（@container）能问“组件自身多宽”——同样是卡片，放进侧栏变窄、放进主栏变宽，布局跟着自己的宽度走，真正实现组件级自适应。
用法分两步：先给父元素 container-type: inline-size，再用 @container (min-width: 400px) 写规则。
- @container 问的是“我自己的宽度”，不是视口
- 父元素要先声明 container-type: inline-size
- 适合可复用组件：同一组件在不同位置自动换形态
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .panel { container-type: inline-size; border: 1px solid #ccc; border-radius: 10px; padding: 12px; } .media { display: grid; gap: 10px; } /* 容器够宽：图左文右 */ @container (min-width: 420px) { .media { grid-template-columns: 120px 1fr; } } </style> </head> <body> <div class="panel"> <div class="media"> <img src="https://picsum.photos/120/80" alt="图"> <p>容器宽度小于 420px 时上下堆叠，够宽时图文并排。</p> </div> </div> </body> </html>
本节要点容器查询让组件按自身宽度响应；先 container-type 声明容器，再 @container 写规则。
