问题阐述:
H5项目通常需要进行页面适配，以满足不同屏幕尺寸的要求。在这方面，常常会使用像px-to-vw/rem等技术。postcss-px-to-viewport是一款PostCSS插件，能够将px值转换为视口单位（如vw、vh），这在H5开发中是常见的解决方案。然而，这种方案仍然存在一些不足之处，例如如何限制最大宽度，以及如何适配vant组件库。今天我要推荐的解决方案是postcss-mobile-forever插件，它能够弥补postcss-px-to-viewport插件无法限制最大宽度的缺陷，从而实现更灵活的扩展。
1. 介绍
如果您在使用 postcss-px-to-viewport 实现伸缩界面的时候，不希望界面在大屏设备上撑满整个屏幕而难以浏 览，希望界面在达到某一个合适的宽度后停止伸缩(限制最大宽度)，您可以使用本插件。如果你的项目使用vant组 件库也可以通过postcss-mobile-forever文档对vant进行配置，或者选择其他插件搭配使用如：cnjm-postcss-px-to-viewport。
cnjm-postcss-px-to-viewport基于postcss-px-to-viewport插件稍加改造的 和使用postcss-px-to-viewport 是基本一样的，只是多处理了vant等375尺寸问题
2. 安装
安装最新版本（基于 postcss@^8.0.0）：
pnpm add postcss postcss-mobile-forever -D
npm install --save-dev postcss postcss-mobile-forever
yarn add -D postcss postcss-mobile-forever
安装最新的兼容版本（基于 postcss@^6.0.0）
npm install postcss-mobile-forever@legacy --save-dev
yarn add -D postcss-mobile-forever@legacy
3. 配置
安装之后在 postcss.config.js 配置文件中引入，或者其它框架配置文件中引入。
postcss.config.js有好几种配置格式。
Vite：
module.exports = {
plugins: {
tailwindcss: {},
"postcss-mobile-forever": {
appSelector: "#app", // 页面最外层选择器，例如“#app”，用于设置在桌面端和移动端横屏时的居中样式
maxDisplayWidth: 480, // 限制视口单位的最大宽度
},
// 使用 cnjm-postcss-px-to-viewport 规避 postcss.plugin was deprecated 警告
"cnjm-postcss-px-to-viewport": {
viewportWidth: 375, // 根据设计稿设定
minPixelValue: 1, // 最小的转换数值
unitPrecision: 2 // 转化精度，转换后保留位数
},
autoprefixer: {
overrideBrowserslist: ["Android >= 4.0", "iOS >= 7"]
}
}
};
Webpack:
import mobile from 'postcss-mobile-forever' // <---- 这里
import autoprefixer from 'autoprefixer'
// 省略……
{
postcss: {
plugins: [
autoprefixer(),
mobile({ // <---- 这里
appSelector: '#app',
viewportWidth: 375,
maxDisplayWidth: 580,
}),
]
}
}
// 省略……
4. 范例
postcss-mobile-forever github 文件夹 example/ 内提供了分别在 React、Svelte、Vue、Next.js、Nuxt 和原生 JavaScript 中使用 postcss-mobile-forever 的范例，通过命令行进入对应的范例文件夹中，即可运行：
cd example/react/
npm install
npm run start
5.效果
改造前：
改造后：
