在移动端开发中，如何按照设计稿还原页面布局并保证其在各种设备上都能良好显示，是一个非常关键的问题。由于不同手机的屏幕尺寸、像素密度存在差异，直接使用 px 进行开发容易导致页面错乱或图片模糊。
本文将从两个核心维度讲解如何进行移动端适配：
- ✅ 适配不同像素密度（DPR）
- ✅ 适配不同屏幕大小（响应式布局）
📌 一、适配不同像素密度（Pixel Density）
1. 像素的基本概念
| 类型 | 含义说明 |
|---|---|
| 物理像素 | 屏幕硬件决定的最小显示单元 |
| 逻辑像素（CSS像素） | 开发者使用的抽象单位，由浏览器自动缩放 |
| 设备像素比（DPR） | 物理像素 / 逻辑像素，如 DPR=2 表示一个逻辑像素由 2x2 的物理像素组成 |
2. 图片适配问题
- 高 DPR 设备下，低分辨率图片会模糊；
- 解决方案：
- 使用多倍图（@2x/@3x）；
- 利用
srcset和媒体查询选择合适精度的图片；
示例：使用 srcset
<img src="logo.png"
srcset="logo@2x.png 2x,
logo@3x.png 3x"
alt="Logo">
示例：媒体查询切换背景图
.logo {
background-image: url("logo.png");
}
@media (min-resolution: 2dppx) {
.logo {
background-image: url("logo@2x.png");
background-size: 100px 50px;
}
}
📌 二、适配不同屏幕大小（响应式布局）
为了使页面在不同宽度的设备上都能良好显示，应使用相对单位来代替固定单位 px。
1. 推荐使用的相对单位
| 单位 | 说明 | 推荐指数 |
|---|---|---|
rem | 相对于根元素字体大小，适合全局控制 | ⭐⭐⭐⭐⭐ |
vw/vh | 视口宽度/高度的百分之一，适合全屏布局 | ⭐⭐⭐⭐ |
em | 相对于当前元素字体大小，适合局部组件 | ⭐⭐⭐ |
2. 使用 rem 实现响应式布局（推荐方案）
步骤一：设置 HTML 根字号
function setRem() {
const baseSize = 16; // 设计稿为750px时对应的1rem=16px
const scale = document.documentElement.clientWidth / 750;
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}
window.addEventListener('resize', setRem);
setRem();
📌 说明：
- 设计稿一般为 750px（iPhone6/7/8）；
- 动态计算根字号，实现等比缩放；
- 设置最大缩放比例避免过度放大。
步骤二：样式中使用 rem 单位
.container {
width: 750px; /* 750px 对应 46.875rem */
font-size: 16px; /* 1rem */
}
📌 注意：通常使用 CSS 预处理器（如 Sass、Less）或 PostCSS 插件自动转换 px 到 rem。
3. 使用 vw/vh 实现响应式布局（适用于简单项目）
.title {
font-size: 5vw; /* 字体大小随视口宽度变化 */
}
.fullscreen {
width: 100vw;
height: 100vh;
}
✅ 优点：
- 不依赖 JavaScript；
- 简单直观。
❌ 缺点：
- 在 iOS 上软键盘弹出可能影响
vh； - 字体大小波动较大，体验不佳。
📈 三、完整的移动端适配流程总结
| 步骤 | 内容 |
|---|---|
| 1️⃣ 设计稿确认 | 获取设计稿宽度（如750px），确定基准字体大小（如1rem=16px） |
| 2️⃣ 设置 viewport | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 3️⃣ 设置 root font-size | JS 动态设置 html 的 font-size |
| 4️⃣ 样式书写 | 使用 rem 或 vw 单位编写样式 |
| 5️⃣ 多倍图适配 | 使用 srcset 或媒体查询加载高清图片 |
| 6️⃣ 媒体查询优化 | 针对特殊设备做微调（如 iPad、折叠屏） |
