postcss-mobile-forever 是一个 PostCSS 插件，用来自动把你写的 CSS 转成适合移动端的“响应式样式” ，核心目标是：
让移动端样式“一次编写，永久适配不同屏幕宽度”****
（名字里的 mobile-forever 就是这个意思）
一句话说明
它通过 PostCSS 在构建阶段，把你的 px 样式转换成 vw / rem / 响应式规则，从而实现移动端自适应。
一、它解决什么问题？
传统移动端适配痛点：
-
不同手机宽度不一样（320 / 375 / 390 / 414 / 768…）
-
写死 px 在不同设备显示不一致
-
手动换算 vw / rem 很烦
👉 postcss-mobile-forever：你写 px，它帮你自动适配****
二、工作原理（核心）
postcss-mobile-forever 工作在 CSS 编译阶段：
你写的 CSS（px） ↓ PostCSS ↓ 转成 vw / rem / 媒体查询 ↓ 浏览器运行
⚠️ 运行时不会有任何开销，全是构建期完成。
三、它和常见适配方案的区别
| 方案 | 思路 | 问题 |
|---|---|---|
| flexible + rem | JS 动态算根字体 | 依赖 JS，首屏闪动 |
| 手写 vw | 人工换算 | 心智成本高 |
| postcss-px-to-viewport | px → vw | 简单但不够灵活 |
| postcss-mobile-forever | px → 自适应策略 | 更完整、偏工程化 |
四、它一般怎么用？
1️⃣ 安装
pnpm add -D postcss-mobile-forever
2️⃣ PostCSS 配置示例
// postcss.config.js module.exports = { plugins: { 'postcss-mobile-forever': { viewportWidth: 375, // 设计稿宽度 unitPrecision: 6, selectorBlackList: [], minPixelValue: 1, mediaQuery: true } } }
3️⃣ 你写的 CSS
.button { width: 150px; height: 44px; font-size: 16px; }
构建后（示意）
.button { width: 40vw; height: 11.73vw; font-size: 4.26vw; }
五、适合哪些项目？
✅ 适合：
-
H5 / Web 移动端
-
uni-app（.vue WebView 页面）
-
Electron（窗口自适应）
-
Vue / React 移动 Web 项目
❌ 不适合：
- uni-app x / .uvue （原生渲染）****
- 纯桌面 Web
- 需要严格像素级 UI 的场景
六、和你当前技术路线的关系（很重要）
结合你前面聊的：
-
uni-app
-
uni-app x
-
Vue3 + TS
-
Electron
👉 推荐结论：
| 场景 | 是否使用 |
|---|---|
| uni-app .vue 页面 | ✅ 可用 |
| uni-app .nvue | ❌ |
| uni-app x .uvue | ❌ |
| Electron + Vue | ⚠️ 看是否响应式 |
| H5 项目 | ✅ 很合适 |
七、常见误区
❌ 以为它是运行时 JS
❌ 用在原生渲染（uvue / nvue）
❌ 和 rem + flexible 混用
❌ 设计稿尺寸没统一
最后一句话总结
postcss-mobile-forever = 构建期自动做移动端适配的 CSS 转换器****
适合 WebView，不适合原生渲染****
