在实际开发中，移动端适配 是一个非常关键的环节。由于不同手机屏幕的尺寸和像素密度（DPR）存在差异，如果直接使用 px 进行布局，可能会导致页面在某些设备上显示异常或图片模糊。
本文将围绕两个核心维度讲解如何根据设计稿实现移动端适配：
- ✅ 适配不同像素密度（高清图适配）
- ✅ 适配不同屏幕大小（响应式布局）
📌 一、适配不同像素密度（高清图适配）
1. 像素的基本概念
| 类型 | 含义说明 |
|---|---|
| 物理像素（device pixel） | 屏幕硬件决定的最小显示单元 |
| 逻辑像素（CSS像素） | 开发者使用的抽象单位，由浏览器自动缩放 |
| 设备像素比（DPR, Device Pixel Ratio） | 物理像素 / 逻辑像素，如 DPR=2 表示一个逻辑像素由 2x2 的物理像素组成 |
2. 图片模糊问题分析
- 在高 DPR 设备上，低分辨率图片会被拉伸放大，导致模糊；
- 解决方法：
- 提供多倍图（如 @2x/@3x）；
- 使用 CSS 媒体查询或 HTML 属性选择合适精度的图片；
3. 实现方式
✅ 方式一：使用 <img> 的 srcset
<img src="logo.png"
srcset="logo@2x.png 2x,
logo@3x.png 3x"
alt="Logo">
📌 优点：原生支持，浏览器自动选择最合适的图片。
✅ 方式二：使用媒体查询切换背景图
.logo {
background-image: url("logo.png");
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.logo {
background-image: url("logo@2x.png");
background-size: contain;
}
}
📌 适用场景：适用于背景图或图标等需要精细控制的场景。
📌 二、适配不同屏幕大小（响应式布局）
为了使页面在各种设备上都能良好显示，应避免使用固定单位 px，而采用相对单位来布局，如：
| 单位 | 说明 | 推荐指数 |
|---|---|---|
rem | 相对于根元素字体大小，适合全局控制 | ⭐⭐⭐⭐⭐ |
vw/vh | 视口宽度/高度的百分之一，适合全屏布局 | ⭐⭐⭐⭐ |
em | 相对于当前元素字体大小，适合局部组件 | ⭐⭐⭐ |
🧩 三、推荐方案：使用 rem + JS 动态计算字号（主流做法）
这是目前移动端开发中最常用的适配方案，尤其适合以 750px 或 640px 为标准设计稿的项目。
1. 设置视口 viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2. 动态设置 HTML 根字号（JS 控制）
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();
📌 说明：
- 通过 JavaScript 动态调整
html的font-size，从而让rem的值随屏幕变化； - 设置最大缩放比例（如不超过 2 倍），防止文字过大影响体验。
3. 编写样式时使用 rem 单位
.container {
width: 750px; /* 按照设计稿数值 */
font-size: 16px; /* 对应 1rem */
}
.title {
font-size: 1.5rem; /* 实际为 24px */
}
📌 优化建议：
- 使用 PostCSS 插件
postcss-pxtorem可以自动将px转换为rem，提升开发效率； - 配合 Vue CLI、Vite 等现代构建工具，可一键完成转换。
🧩 四、备选方案：使用 vw/vh 实现响应式布局
适用于不需要复杂交互、结构简单的页面，比如 H5 页面、营销页等。
示例代码：
.title {
font-size: 5vw; /* 字体大小随视口宽度变化 */
}
.fullscreen {
width: 100vw;
height: 100vh;
}
✅ 优点：
- 不依赖 JavaScript；
- 实现简单直观。
❌ 缺点：
- 在 iOS 上软键盘弹出会影响
vh计算； - 字体大小波动较大，可能影响阅读体验。
📈 五、完整的移动端适配流程总结
| 步骤 | 内容 |
|---|---|
| 1️⃣ 获取设计稿 | 明确设计稿宽度（如 750px） |
| 2️⃣ 设置 viewport | <meta name="viewport"> 必不可少 |
| 3️⃣ 设置 root font-size | JS 动态设置 html 的 font-size |
| 4️⃣ 编写样式 | 使用 rem 或 vw/vh 单位编写样式 |
| 5️⃣ 多倍图处理 | 使用 srcset 或媒体查询加载高清图 |
| 6️⃣ 媒体查询优化 | 针对特殊设备做微调（如 iPad、折叠屏） |
