设计稿是 750px，用户用的是 375px，我夹中间了。
在移动互联网时代，网页需要适配各种不同尺寸的设备，确保在不同手机上都能有良好的显示效果和用户体验。为了实现这一点，移动端适配成为前端开发中不可或缺的一环。
本文将围绕 使用 rem 单位 + flexible.js 的适配方案，从设计稿还原、单位转换、代码实现到实际开发技巧，系统地讲解如何实现移动端的响应式布局。
一、为什么不能使用 px？
px 是一种绝对单位（相对于屏幕），它在不同分辨率和屏幕尺寸的设备上表现不一致。例如：
- 在普通屏幕上
1px显示为一个像素点； - 在高清屏（如 Retina 屏幕）上，
1px可能会被渲染为多个物理像素点，导致边框变粗、布局错乱。 - 由于是绝对单位，所占屏幕的大小是固定的。所以在大屏幕上和小屏幕上给用户的观感是不一致的，这样会导致用户体验变差。
因此，在移动端开发中，我们更推荐使用 相对单位，如：
rem（相对于根元素<html>）vw/vh（相对于视口宽度/高度）em（相对于当前元素的字体大小）
二、使用 rem 实现等比缩放
-
什么是
rem？rem（root em）是相对于 HTML 根元素字体大小的单位。例如：html { font-size: 100px; }那么
.box { width: 2rem; /* 实际宽度为 200px */ } -
为什么使用
rem？使用
rem可以通过动态修改<html>的font-size，实现页面整体缩放。并配合媒体查询或 JS 动态设置，可以适应不同屏幕尺寸。rem`适合响应式布局，能够保证设计稿还原度高。
三、设计稿与适配逻辑
-
常见设计稿尺寸
-
iPhone6/7/8：750px（主流设计稿）
这是标准尺寸
-
iPhone6 Plus/7 Plus：1080px
-
设计稿通常基于 2x 或 3x 的高清图输出。
-
-
适配逻辑
以 750px 设计稿为例
页面宽度为 10rem（将屏幕宽度划分为 10 份）。所以有
1rem = 750px / 10 = 75px。若某个元素在设计稿中宽为 200px，则在 CSS 中写为：width: 2.666rem; /* 200 / 75 = 2.666 */
四、使用 flexible.js 实现自动适配
flexible.js 是阿里巴巴团队开源的一套移动端适配方案，核心功能是：
- 动态设置
<html>的font-size，让1rem = 屏幕宽度 / 10。 - 解决移动端
1px问题（通过transform: scaleY(0.5)等方式模拟 1px）。 - 兼容不同设备，实现等比缩放。
在react中引入
npm 安装（适用于 Vue/React 项目）
npm i lib-flexible 解决移动端适配 等分屏幕
然后在入口文件（如 main.js）中引入：
import 'lib-flexible'
五、结合postcss插件自动计算rem
由于需要rem尺寸的地方很多，若每个地方都手动计算，那么就很繁琐。postcss则可以解决这个问题，它是css的与编译器，可以自动将 px 转换为 rem，减少手动计算。
安装
npm i -D postcss postcss-pxtorem 解决px 转换为rem
配置
export default {
plugins: {
"postcss-pxtorem": {
rootValue: 75, // 表示1rem 为多少px 以 iPhone6 为参考，1rem = 75px
propList: ["*"], // 所有属性都转换
exclude: /node_modules/i, // 排除 node_modules 中的文件
},
},
};
这样你就可以在 CSS 中直接写 px，构建工具会自动转换为 rem。 例如：
#box {
width: 375px;
height: 375px;
background: #000000;
}
在浏览器上postcss将其转为：
#box {
width: 5rem;
height: 5rem;
background: #000000;
}
