响应式布局的原理是什么？

响应式是同一套文档，按视口宽度、输入方式和用户偏好改变布局。基础是视口设置、流式尺寸和断点。断点跟着内容什么时候排不下走，不跟着某几款手机的名字走。

原理

html

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

没有它，手机浏览器会按大约 980px 布局再缩小，媒体查询会按这个布局宽度计算，和屏幕对不上。

布局优先用 flex、grid、minmax 和百分比，让中间宽度自己适应。媒体查询只在布局结构要变的时候出现，例如侧栏从横排放到下面。

css

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

图片用 max-width: 100% 和明确的宽高比，避免撑破容器和布局跳动。srcset 按槽位给不同分辨率。

也要考虑 prefers-color-scheme、prefers-reduced-motion，以及 200% 字号时布局是否还可用。触控目标要够大，不要只在桌面宽度上能点到。

移动优先还是桌面优先？

默认样式写成窄屏能用的那一版，再用 min-width 往大屏加栏目。这样小屏不会先下载一套用不到的复杂布局假设。团队如果设计稿从桌面来，也可以从桌面写，但默认样式必须在窄屏上测过。

和自适应有什么差别？

自适应常指几套固定宽度之间切换。响应式强调连续的流式变化，断点只是结构变化的点。面试里说明自己用的是流式网格加少量断点即可。