Appearance
响应式布局：媒体查询、容器尺寸与流式设计
主题边界
- 响应式布局关注同一套内容在不同视口、容器和输入能力下如何保持可读、可点和可维护。
- 它既是 CSS 主题，也直接影响组件拆分和设计系统规则。
机制与流程
- 传统方案以 viewport 媒体查询为主，根据宽度、高度、悬停能力、色彩方案等条件切换样式。
- 现代组件化场景越来越依赖 container query，因为组件经常嵌套在未知宽度的容器里。
- 流式尺寸通常结合
%、fr、minmax()、clamp()、rem与内容自适应，而不是只用固定断点切换。
关键差异
- 媒体查询擅长页面级布局切换，容器查询更适合组件级自适应。
- 自适应并不等于响应式，自适应常是若干固定档位切换，响应式强调连续可伸缩。
边界条件
- 只围绕常见设备尺寸写断点很容易在中间尺寸和嵌入式场景下断裂。
- 触控设备与桌面设备的差异不止屏宽，还涉及 hover、pointer 精度和输入方式。
工程落点
- 设计系统应先定义排版、间距、网格和组件断点策略，再落到具体页面。
- 排查移动端体验问题时，要同时看视口设置、最小点击区域、文本缩放和图片资源策略。