标准答案
- 响应式布局的目标是让同一页面在不同视口、设备和输入方式下都可读、可操作、布局稳定。
- 常见方案包括流式布局、媒体查询、Flex/Grid、自适应图片、rem、vw/vh、clamp、容器查询等。
- 百分比适合跟随父容器做流式宽度；媒体查询适合在关键断点切换布局结构；rem 适合做整体尺度控制；vw/vh 适合和视口强相关的尺寸。
- clamp 可以给字号或间距设置最小、理想和最大值；Flex/Grid 负责弹性布局和二维结构。
- 工程里更推荐移动优先：先写小屏可用的单列布局，再用 min-width 媒体查询增强到平板和桌面。响应式不是把设计稿等比例缩放，还要处理布局、字号、图片、点击区域和内容密度。
题目解析
这题的高分点是“组合方案”。单独说 rem 适配或媒体查询都太窄。
面试中可以主动提到移动端 viewport、图片 srcset/sizes、触控目标和横竖屏边界。
代码示例
移动优先布局通常先写单列，再逐步增强。
CSS
.layout {
display: grid;
gap: 16px;
}
.title {
font-size: clamp(20px, 4vw, 32px);
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 240px minmax(0, 1fr);
}
}常见误区
- 把响应式理解成按设计稿比例缩放。
- 所有尺寸都用 vw，导致超宽屏和小屏阅读体验失控。
- 只适配布局，不处理图片、字号、点击区域和内容换行。