媒体查询和容器查询分别适合什么场景?
参考答案
媒体查询根据视口、输入设备或用户偏好等环境条件选择样式;容器查询让组件根据祖先查询容器的尺寸等条件调整布局,更适合在侧栏、主内容区等不同位置复用的组件。
尺寸容器查询需要正确建立 container-type,并注意包含行为会影响尺寸计算。组件不能在形成循环依赖的条件下随意通过自身尺寸决定自身布局,通常查询合适的祖先容器。
页面整体断点仍适合媒体查询,局部卡片结构可使用容器查询,两者可协作。还要覆盖 prefers-reduced-motion、色彩方案和高对比度等偏好,不能把响应式仅理解为几个屏幕宽度断点。