做移动端开发的时候，是不是都遇到过这样的崩溃瞬间：设计稿明明是 750px 的标准尺寸，自己写的页面在 iPhone 上好好的，一放到安卓机上就歪到姥姥家；改来改去好不容易对齐了，换个尺寸的手机又出现滚动条……
今天就分享一套经过无数项目验证的 “移动端适配终极方案”：lib-flexible + postcss-pxtorem 自动换算。从底层原理讲到实战配置，让你再也不用手动算 rem，一次配置搞定所有机型适配，看完直接能用！
移动端适配为什么这么难？
先搞懂一个核心矛盾：手机屏幕尺寸太多了。
- 苹果：iPhone 12 是 390px，iPhone SE 是 320px；
- 安卓：小米、华为、OPPO 各有各的尺寸，从 360px 到 428px 不等；
- 设计师：通常只给一套 750px 的设计稿（基于 iPhone 的 2 倍屏）。
如果用固定单位px写样式，会出现两种尴尬：
- 在小屏幕上内容溢出（比如 320px 的手机装不下 390px 的布局）；
- 在大屏幕上留白太多（比如 428px 的手机显示 390px 的布局，两边空荡荡）。
我们需要的是 “等比例缩放”：不管屏幕多大，元素之间的比例保持一致，就像图片缩放一样，不会变形。
lib-flexible：让 rem 成为 “等比例神器”
什么是 rem？
rem是一种相对单位，它的大小相对于根元素（html 标签）的 font-size。比如：
- 若
html { font-size: 100px; }，则1rem = 100px； - 若
html { font-size: 50px; }，则1rem = 50px。
只要能让html的font-size随屏幕宽度自动变化，rem就能实现 “等比例缩放”—— 这就是移动端适配的核心思路。
解决适配的第一步，是让 rem 和屏幕宽度挂钩。这里就要用到阿里开源的 lib-flexible 库，它的原理特别简单粗暴但有效：
设置 html 的 fontSize = 屏幕宽度 / 10，也就是说 1rem = 屏幕宽度的 1/10。
比如：
- 在 375px 宽的手机上，1rem = 37.5px（375/10）；
- 在 414px 宽的手机上，1rem = 41.4px（414/10）；
- 在 320px 宽的手机上，1rem = 32px（320/10）。
这样一来，不管屏幕是大是小，元素用 rem 定义的尺寸都会跟着屏幕宽度等比例缩放，从根源上解决了 “不同设备显示不一致” 的问题。
安装也很简单，一行命令搞定：
pnpm i lib-flexible
在项目入口文件中引入，它会自动在所有设备上生效，不需要额外写一行布局代码，是不是很省心？
import 'lib-flexible';
引入后，lib-flexible会在页面加载和屏幕尺寸变化时，自动设置html的font-size：
// 核心逻辑（简化版）
htmlFontSize = window.innerWidth / 10;
// 例如：
// iPhone 750px宽（设计稿基准）→ 1rem = 75px（750/10）
// 安卓375px宽 → 1rem = 37.5px（375/10）
// 安卓414px宽 → 1rem = 41.4px（414/10）
这意味着：在任何设备上，1rem 都等于屏幕宽度的 1/10。不管屏幕多大，元素用 rem 定义的尺寸都会按比例缩放 —— 完美实现 “等比例适配”。
懒人福音：自动换算 px→rem，告别手动计算
虽然知道了换算公式，但每次写样式都要手动算 “px÷75” 也太麻烦了，尤其是复杂页面，很容易算错。
这时候就该 postcss-pxtorem 出场了，它能自动把你写的 px 转换成 rem，根本不用自己动手算。
具体操作步骤：
- 安装依赖（注意是开发环境依赖）：
pnpm i -D postcss postcss-pxtorem
- 新建配置文件 postcss.config.js，写入以下内容：
export default {
plugins: {
"postcss-pxtorem": {
rootValue: 37.5, // 对应375px设备宽度，1rem=37.5px（750px设计稿的1/20）
propList: ['*'], // 所有CSS属性都生效
exclude: /node_modules/i, // 排除node_modules里的文件
},
},
}
配置好之后，你在代码里直接写设计稿上的 px 值就行。比如设计稿上盒子是 200px，你 CSS 里就写 width:200px，postcss 会自动转换成 4rem（300÷75=4），完全不用自己换算！
总结：这套方案为什么值得用？
- 适配零压力：lib-flexible 让 1rem = 屏幕宽度 / 10，不管什么设备都能等比例显示；
- 设计稿完美还原：结合 750px 设计稿的换算逻辑，保证视觉效果和设计图一致；
- 开发效率翻倍：postcss-pxtorem 自动处理单位换算，不用再手动算 rem，少写一行是一行。
