响应式布局常用方案有哪些？

简化版

响应式布局是让页面适配不同屏幕尺寸。常见方案有流式布局、媒体查询、Flex/Grid、自适应图片、相对单位、移动端 viewport 设置，以及必要时的断点设计。

常用手段：

<meta name="viewport" content="width=device-width, initial-scale=1" />

面试时要强调响应式不是“写几个媒体查询”这么简单，而是从内容优先、断点设计、布局弹性、资源适配一起考虑。

PC、平板、手机的屏幕宽度不同，输入方式也不同。如果页面写死宽度，比如 width: 1200px，在手机上就会横向滚动。响应式布局就是尽量让内容根据可用空间重新排列。

很多响应式问题不是靠媒体查询解决，而是靠一开始就不要写死。

.container {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
}

这表示容器在小屏保留左右间距，在大屏最大不超过 1120px。

卡片列表可以用：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

它天然具备响应式能力。

断点不应该完全按设备型号写，而应该按布局什么时候撑不住来写。

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

比如两栏布局在窄屏放不下时，改成单栏。这个断点来自内容和布局，不是死记某个手机尺寸。

图片如果不限制宽度，很容易溢出容器：

img {
  max-width: 100%;
  height: auto;
}

字体可以用 clamp() 做流体字号：

h1 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
}

这样标题会随视口变化，但有上下限，不会过小或过大。

响应式面试经常会问“移动端适配是不是 rem 换算”。更完整的回答是：rem 只是单位策略，响应式还包括布局策略、图片资源、交互方式、断点设计和内容优先级。只靠 rem 等比缩放，可能让大屏太空、小屏文字过小。

断点设计也不要只背 375、768、1024。更专业的做法是内容驱动：当导航放不下时切换为折叠菜单，当卡片最小宽度不足时减少列数，当表格无法阅读时改成卡片或横向滚动。

工程里建议先写移动端或窄屏可用的基础布局，再逐步增强到大屏。图片可以用 srcset、sizes 或现代格式减少流量；交互区域要考虑触摸目标大小，不能只看视觉截图。

假设卡片最小可读宽度为 240px，容器左右内边距各 16px，列间距为 20px。两列布局至少需要 2 × 240 + 20 + 2 × 16 = 532px 的视口宽度；当可用空间低于这个值时切成一列，是由内容约束推导出的断点，比按某款手机型号硬编码更可解释。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.25rem;
}

媒体查询应查询视口的 width、交互能力或用户偏好等真实条件，不应依赖已弃用的 device-width 去猜设备型号。

误区：响应式布局等于把所有 px 换成 rem。 单位只解决一部分尺寸表达，布局重排、资源选择、交互方式和内容优先级仍需单独设计。
误区：断点必须固定使用 375、768、1024。 断点应由内容何时溢出、拥挤或失去可用性决定，团队可以再把结果沉淀为设计令牌。
误区：只要图片写 max-width: 100% 就完成资源适配。 它能防止视觉溢出，却不会自动减少下载体积；响应式资源还要使用 srcset、sizes 或 picture。
追问：为什么移动端需要 viewport meta？ 没有它时移动浏览器可能采用较宽的默认布局视口再缩放页面，CSS 断点与预期设备宽度不一致。
追问：媒体查询和容器查询如何选择？ 页面级模式切换看视口，复用组件根据所在槽位改变自身布局时更适合看容器。
追问：为什么不推荐用 device-width 判断手机？ 它描述物理设备呈现面的尺寸，不等于文档实际可用视口，也不能可靠代表输入能力或设备类型。
追问：响应式如何兼顾可访问性？ 保证可缩放文本、足够触摸目标、合理焦点顺序，并对减少动画、强制颜色等用户偏好提供适配。

响应式可以记成“四件套”：弹性布局、相对尺寸、媒体查询、资源适配。先让布局天然会伸缩，再在撑不住的地方加断点，这比到处堆媒体查询更稳。