标准答案
- @media 适合页面级响应式布局，例如不同视口宽度下切换栏位。
- @supports 用来检测浏览器是否支持某个 CSS 特性，适合做渐进增强或降级。
- Container Query 让组件根据自身容器宽度变化，而不是根据整个视口变化。
- 页面布局优先考虑 media query，复用组件在不同容器中适配时更适合 Container Query。
- 新特性要配合 @supports 或合理 fallback，避免旧浏览器出现不可用布局。
题目解析
这题要分清条件来源：视口条件、能力条件、容器条件。
Container Query 很适合卡片、侧栏组件和嵌入式模块，因为它们是否拥挤取决于容器。
代码示例
组件可以声明容器，再按容器宽度改变内部布局。
CSS
.card-list {
container-type: inline-size;
}
@container (min-width: 520px) {
.card {
display: grid;
grid-template-columns: 160px 1fr;
}
}常见误区
- 所有响应式都用视口断点，组件换容器后布局失效。
- 使用新 CSS 特性时不考虑支持范围和 fallback。
- 把 @supports 当成媒体查询使用，混淆能力检测和尺寸检测。