面试题：如何根据设计稿进行移动端适配？

移动端适配的核心目标是：让网页在不同尺寸和分辨率的移动设备上，都能呈现出与设计稿一致的视觉效果和用户体验。

以下是根据设计稿进行移动端适配的完整流程和常用方案：

一、准备工作：了解设计稿信息

在开发前，必须明确以下关键信息：

信息项	说明
设计稿尺寸	通常是 `750px`（iPhone 6/7/8）或 `375px` 宽度（逻辑像素）
设计稿单位	所有尺寸以 `px` 为单位（如：按钮宽 100px，字体 16px）
基准屏幕	常以 iPhone 6/7/8 的 `375px` 宽度为基准
是否标注了 DPR	设计稿是 @2x 还是 @3x？常见为 @2x（750px / 2 = 375px）

✅ 举例：一张 750px 宽的设计稿，通常是 @2x 的，对应设备逻辑宽度为 375px。

二、主流适配方案

✅ 方案 1：使用 `viewport` + `rem`（推荐）

这是目前最成熟、兼容性最好的适配方案。

原理：

使用 rem 作为 CSS 长度单位（1rem = 根元素 font-size）
动态设置 <html> 的 font-size，使其与屏幕宽度成正比
将设计稿中的 px 按比例转换为 rem

实现步骤：

设置 viewport

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

   function setRem() {
     const designWidth = 375; // 设计稿逻辑宽度（如 375px）
     const rem = 100; // 1rem = 100px（便于计算）
     const scale = document.documentElement.clientWidth / designWidth;
     document.documentElement.style.fontSize = rem * scale + 'px';
   }

   window.addEventListener('resize', setRem);
   setRem();

CSS 中使用 rem

设计稿中元素宽 100px → width: 1rem;（因为 100px / 100 = 1rem）
字体 16px → font-size: 0.16rem;

✅ 优点：精确控制，适配所有屏幕
💡 可结合 postcss-pxtorem 插件自动转换 px 为 rem

✅ 方案 2：使用 `viewport` + `vw/vh`（现代推荐）

vw（viewport width）是视口宽度的 1%，无需 JS，纯 CSS 实现。

原理：

1vw = 1% 的视口宽度
设计稿 750px → 视口宽度 375px → 1vw = 3.75px
转换公式：rem = (px / 750) * 100，但更简单的是直接用 vw

示例：

/* 设计稿 750px，元素宽 100px */
.element {
  width: calc(100 / 750 * 100vw); /* = 13.333vw */
}

/* 或使用 CSS 变量简化 */
:root {
  --vw: calc(100vw / 375); /* 1px = 0.2666vw */
}
.element {
  width: calc(100 * var(--vw)); /* 100px */
}

✅ 优点：无需 JS，响应更快，现代浏览器支持良好
🎯 推荐用于新项目

✅ 方案 3：使用 Flexbox / Grid 布局（布局级适配）

对于非精确像素还原的场景，可使用弹性布局实现自适应。

.container {
  display: flex;
  padding: 0 16px; /* 固定边距 */
}

.item {
  flex: 1; /* 自动分配空间 */
}

✅ 优点：语义清晰，响应式友好
🎯 适用于内容型页面（如新闻、列表）

✅ 方案 4：媒体查询（Media Queries） + 断点

针对不同屏幕尺寸应用不同样式。

/* 默认（小屏） */
.box { width: 100%; }

/* 平板及以上 */
@media (min-width: 768px) {
  .box { width: 50%; }
}

/* 大屏 */
@media (min-width: 1024px) {
  .box { width: 33.3%; }
}

✅ 优点：控制精细
❌ 缺点：需维护多个断点，不适合像素级还原

三、字体适配

避免使用固定 px 字体
推荐：
- rem：随根字体变化
- vw：响应式字体
- min/max font-size 结合 clamp()

.text {
  font-size: clamp(14px, 4vw, 18px); /* 最小 14px，最大 18px，中间用 vw */
}

四、图片适配

使用 max-width: 100% 防止溢出
使用 srcset 提供多倍图
使用 <picture> 元素适配不同分辨率

<img src="img@1x.jpg" 
     srcset="img@2x.jpg 2x, img@3x.jpg 3x"
     alt="适配图片">

五、面试加分点

点位	说明
🌟 DPR 与 CSS 像素	理解物理像素 vs 逻辑像素，如 iPhone 6 的 DPR=2
🌟 移动优先（Mobile-First）	先写小屏样式，再通过 `min-width` 增强
🌟 响应式断点设计	根据内容而非设备设置断点
🌟 工具链支持	使用 `postcss-pxtorem`、`viewport-units-buggyfill` 等工具
🌟 性能考虑	避免频繁重计算，`vw` 方案比 JS 更高效

✅ 总结

根据设计稿进行移动端适配，核心是将设计稿的 px 单位转换为与屏幕尺寸相关的相对单位。

主流方案：

rem + JS：兼容性好，控制精确

vw/vh：现代推荐，无需 JS，响应快

Flex/Grid：布局级自适应

媒体查询：多断点适配

💬 一句话总结：
“适配的本质是比例还原。选择 rem 或 vw 方案，结合 viewport 设置，即可实现设计稿在不同设备上的精准呈现。”

在面试中，能结合具体代码说明 rem 或 vw 的计算过程，并提到 postcss 工具链，会显得你具备实战经验。

THE END

前端 CSS 面试题