从手算到自动化：lib-flexible + postcss-pxtorem，移动端适配不再算头疼！

写给每一个「设计稿 750px，看着屏幕在算 rem」算到想放弃前端的你。今天，就用这篇文章帮你从"px→rem"的体力活中解脱出来！

💡前言：设计稿那么大，我的屏幕这么小，怎么适配？

我们在开发移动端页面时，总会收到 UI 设计师的一句"这是 750px 的设计稿哦"，然后前端同学就陷入了日常灵魂拷问：

设计稿是 600px，我要除多少才是 rem？
这个 padding 是 24px，我是不是要写 0.32rem？
算来算去，我人都快没了......

别怕，今天我们就把这套"移动端适配 + 单位换算"流程自动化，让你写 px，页面却能灵活变大变小，适配各种屏幕大小，还不出 bug！

📐 移动端适配神器：lib-flexible 是什么？

lib-flexible 是阿里出的一个适配库，它的核心思想是：

动态设置 html 的 font-size，然后通过 rem 单位来实现页面的等比缩放。

一句话总结：让不同屏幕的手机都能看见一样大小的按钮、字体、边距。

🧠 它到底是怎么做到的？

lib-flexible 会在页面加载时自动运行这段逻辑：

js 复制代码

const width = document.documentElement.clientWidth
document.documentElement.style.fontSize = width / 10 + 'px'

也就是说：屏幕宽度除以10 = 1rem

举个例子：

iPhone6 屏幕宽 375px，html font-size = 37.5px
你写了 2rem，实际显示就是 75px

这样一来，你只要写 rem 单位，页面就能自适应各种屏幕啦。

😭 但问题来了：我设计稿是 750px，我还要自己除以 100 吗？

是的，很多同学会这么干：

css 复制代码

width: 600px; /* 设计稿给的 */
⏬ ⏬ ⏬ 手动转换
width: 8rem;   /* 600 / 75 */

你写 10 个样式，要算 10 遍。设计稿一改，公式全废。手算 = 垃圾适配体验。

我们要的是自动！💥

✅ 自动换算的神器登场：postcss-pxtorem

这就是我们今天的主角！

postcss-pxtorem 是一个 PostCSS 插件，它能把你写的 px 自动转换成 rem。

你只管写 px，构建时它帮你全部转成 rem！

⚙️ 怎么配置？（以 Vue CLI 项目为例）

1️⃣ 安装依赖

css 复制代码

npm i postcss-pxtorem -D

2️⃣ 配置 postcss.config.js

js 复制代码

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 设计稿宽度 / 10，比如 750px 就写 75
      propList: ['*'], // 所有属性都转
      selectorBlackList: ['.ignore'], // 忽略 .ignore 开头的类
    },
  },
}

3️⃣ 编写 CSS（还是写 px！）

css 复制代码

.box {
  width: 300px;
  padding: 24px;
  font-size: 32px;
}

构建后自动变成：

css 复制代码

.box {
  width: 4rem;
  padding: 0.32rem;
  font-size: 0.4267rem;
}

✅ 搞定！无脑写 px，输出全是 rem。

👬 lib-flexible + postcss-pxtorem 是如何配合的？

工具	作用
lib-flexible	设置 html 的 font-size，比如 1rem = 75px
postcss-pxtorem	把 px 自动转成 rem

你可以想象成：

dart 复制代码

你写的 px => postcss-pxtorem => rem => lib-flexible => 屏幕自动缩放

⚠️ 实战注意事项

问题	解决方案
某些类不想被转成 rem	用 `.ignore` 类名，然后 `selectorBlackList` 排除
第三方组件库被转换了	用 `exclude: /node_modules/` 排除目录（vite 用户注意）
设计稿是 375px？	那 rootValue 设置为 37.5
和 UI 同学沟通设计尺寸？	一起统一使用 750px 的设计稿尺寸，别搞出 640/828/1125 混乱局面

🚀 Vite 项目也一样！

复制代码

npm install postcss-pxtorem -D

然后在 postcss.config.js 里加：

js 复制代码

export default {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*']
    }
  }
}

Vite 项目也能愉快使用！

🔥 总结一句话

lib-flexible 负责"定比例"，postcss-pxtorem 负责"自动换算"，你写 px，它帮你 rem，最终页面自适应，干净利落！

📚 推荐组合：

工具	作用
`lib-flexible`	自动设置 html 的 font-size
`postcss-pxtorem`	自动把 px 转换成 rem
`rem 单位写样式`	页面能跟着屏幕大小自动缩放
`750px 设计稿`	UI 和前端沟通统一标准

🎁 Bonus：还想更潮一点？

现在越来越多项目用的是 vw/vh + postcss-px-to-viewport，这是 lib-flexible 的进化版。下篇我可以手把手带你用 vw 实现 "真正的无脑适配" ，你要不要看看？