响应式与移动端适配

一句话结论

响应式不是简单按屏幕缩放，而是让布局、字号、图片和交互在不同视口下保持可读、可用、可维护。核心手段是弹性布局、媒体查询、相对单位和资源适配。

viewport

移动端页面通常需要设置：

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

它让布局视口等于设备宽度，否则移动浏览器可能按默认宽视口渲染，再整体缩小，导致文字和布局异常。

媒体查询

.page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}

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

媒体查询适合在关键断点切换布局，例如桌面双栏变移动端单栏。

常用单位

单位	特点	适用场景
px	绝对稳定	边框、图标、固定间距
%	相对父元素	宽度比例
rem	相对根字号	全局字号和间距体系
vw/vh	相对视口	大屏、满屏区域
clamp	设置最小、理想、最大值	响应式字号或容器宽度

图片适配

<img
  src="/banner-800.jpg"
  srcset="/banner-400.jpg 400w, /banner-800.jpg 800w, /banner-1200.jpg 1200w"
  sizes="(max-width: 768px) 100vw, 800px"
  alt="banner"
/>

srcset 和 sizes 可以让浏览器根据视口和像素密度选择合适图片，减少移动端无意义的大图下载。

常见追问

rem 和 vw 怎么选？

rem 更适合设计系统中的字号、间距和组件尺寸，因为它受根字号控制；vw 更适合和视口强相关的大屏或海报式区域。业务后台不建议所有尺寸都用 vw，容易在超宽屏上失控。

移动端 1px 边框怎么处理？

可以用 transform: scaleY(.5)、伪元素、或直接接受现代高分屏下的视觉差异。现在很多项目会通过设计系统统一边框，不再为所有场景单独 hack。

响应式断点怎么定？

不要只按设备型号定断点，应该按内容何时撑不下、布局何时变难用来定。常见断点如 768px、1024px 只是起点，最终要结合真实内容测试。