用 CSS 容器查询重构响应式卡片

响应式布局绕不开「屏幕宽度」这件事，但组件真正关心的往往是「它自己有多宽」。

容器查询解决了什么

过去我们用媒体查询盯住视口，可同一个卡片放进侧栏和放进主栏，宽度天差地别，却只能套同一套断点。容器查询让组件以自身容器为参照：

.card { container-type: inline-size; }
@container (min-width: 420px) {
  .card__title { font-size: 1.25rem; }
}

这样卡片无论被丢进哪里，都能自己决定怎么排。

三个落地建议

• 给可复用组件统一声明 container-type，命名用 @container card/ 提高可读性；
• 断点别太多，2–3 个足够，移动优先；
• 配合 aspect-ratio 固定封面比例，避免图片加载抖动。

好的响应式不是「为屏幕适配」，而是「为容器适配」。

重构之后，同一套卡片在首页网格、侧栏推荐、详情页相关里都不再需要特判，维护成本直线下降。