下一代移动端适配方案：vw + postcss-px-to-viewport，打造真正的无脑适配！🌍 时代变了：lib

写给那些不想再配 html font-size，不想记 rem 换算公式，也不想手动调试的你：适配我只想写 px，剩下交给系统。

🌍 时代变了：lib-flexible 不够“灵活”了？

在过去，我们用 lib-flexible + rem 的方式解决了移动端适配问题。但进入 2020 年后，越来越多项目开始转向新方案：

viewport 单位（vw）+ 自动 px 转换工具，页面直接跟屏幕宽度等比缩放！

为什么这么火？一句话总结：

写 px，构建自动变成 vw，不需要再设置 html font-size，也不用引入 lib-flexible。

真正做到：全自动，零侵入，写法统一，兼容好，适配优雅！

💡 什么是 vw？

vw 是 CSS 的单位，意思是：

1vw = 视口宽度的 1%
如果屏幕宽是 375px，那 1vw = 3.75px
100vw = 100% 全宽

举个栗子 🌰：

.box {
  width: 50vw; /* 屏幕宽度的一半 */
}

这个盒子不管在什么屏幕上，都会自动撑满屏幕的一半。是不是很香？

🔧 自动 px ➜ vw 的插件：postcss-px-to-viewport

我们不会真的手动去把 px 换算成 vw —— 那还不如回去用 abacus 算算盘。

所以我们用 postcss-px-to-viewport 插件帮我们自动转单位，写法如下：

.title {
  font-size: 32px;
}

自动构建成：

.title {
  font-size: 4.267vw; /* 自动换算 */
}

🛠 实战配置（以 Vite 项目为例）

① 安装依赖

npm i postcss-px-to-viewport -D

② 配置 `postcss.config.js`

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 转换的单位
      viewportWidth: 375,  // 设计稿宽度（如 375px）
      unitPrecision: 5,    // 转换后保留的小数位
      propList: ['*'],     // 需要转换的属性，['*'] 表示全部
      viewportUnit: 'vw',  // 转换后的单位
      fontViewportUnit: 'vw', // 字体用 vw 单位
      selectorBlackList: ['.ignore', '.no-vw'], // 忽略的类名
      minPixelValue: 1,    // 小于或等于 1px 不转换
      mediaQuery: false,   // 不转换媒体查询中的 px
    },
  },
}

🤖 开发流程（是真的无脑）

设计稿尺寸：375px（或 750px，根据你团队规范）
CSS 写法：你继续写熟悉的 px
构建工具：自动把 px ➡️ vw
页面适配：自动根据设备宽度等比缩放，完美还原设计稿
不用算 rem，不用调 html 字体大小，直接开写！

📦 转换前后效果一览

💻 写法：

.banner {
  width: 300px;
  font-size: 32px;
  margin: 0 16px;
}

⚙️ 构建后：

.banner {
  width: 40vw;
  font-size: 4.267vw;
  margin: 0 2.133vw;
}

在 375px 宽度的手机上，1vw = 3.75px，完美对应设计稿！

⚠️ 注意事项 & 常见问题

问题	解决方法
不想某些 class 转换？	用 `.ignore`，并加到 `selectorBlackList` 里
不想转换媒体查询？	`mediaQuery: false`（默认就是）
设计稿不是 375px？	改 `viewportWidth`，750px 就写 750
项目引入了第三方库？	可以配合 `exclude` 参数排除 node_modules

🆚 和 rem 的对比总结

对比项	rem + lib-flexible	vw + px-to-viewport
依赖设置 font-size	✅ 需要	❌ 不需要
需要 JS 运行时支持	✅ 是的	❌ 静态转换即可
写法是否直观	❌ 需要换算 rem	✅ 写 px 即可
适配精度	✅ 精确	✅ 精确
推荐指数	⭐⭐⭐	⭐⭐⭐⭐⭐（更现代）

🧠 一句话总结

写 px，自动变 vw；屏幕再大再小，样式全都刚刚好！

🧰 Bonus：配套建议

工具	用途
`postcss-px-to-viewport`	自动把 px ➡ vw
`viewport meta 标签`	`<meta name="viewport"...>` 必须正确设置
`375px or 750px 设计稿`	统一设计尺寸
`.ignore` class	排除不想转的元素

📚 结语

如果说 rem + lib-flexible 是移动适配的“黄金时代”，那么 vw + px-to-viewport 就是“现代前端最优解”。

不需要配置 html 字体、不需要写 rem、不需要折腾适配比例，写代码的时候只管 px，构建的时候自动 vw，最终呈现的是响应式流畅适配体验。

下一代移动端适配方案：vw + postcss-px-to-viewport，打造真正的无脑适配！