CSS 容器查询实战

断点应该跟着容器走

媒体查询看的是视口宽度，但组件关心的是自己被放在多宽的容器里。同一个卡片，放侧栏和放主区域该长得不一样。

.card-wrap {
  container-type: inline-size;
}

@container (min-width: 480px) {
  .card { display: grid; grid-template-columns: 160px 1fr; }
}

注意事项

• 容器必须显式声明 container-type，否则 @container 不生效
• inline-size 只观察横向尺寸，开销远小于 size
• 容器自身不能同时是被查询的目标，要多包一层

flex 布局里还要留意 min-width: auto —— 子项默认不能收缩到内容最小宽度以下，容器查询算出的断点会因此失效。