移动端自适应目前主要有torem和toviewport两种方案，如果项目需要在宽屏上使用时优先使用rem，其他情况优先使用viewport（注意：是二选一方案噢，别全复制去了）
由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。
viewport 方案: postcss-px-to-viewport
rem 方案: amfe-flexible + postcss-pxtorem
一.依赖安装
viewport 方案(推荐)
postcss-px-to-viewport:自动将 px 转为 viewport
npm install @ttou/postcss-px-to-viewport -D
rem 方案
amfe-flexible(有宽屏显示竖屏需求则使用 lib-flexible ): 自适应设置根节点字体大小
lib-flexible会自动在html的head中添加一个meta name=”viewport”的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。
postcss-pxtorem: 自动将 px 转为 rem
npm i -S amfe-flexible
// 有宽屏显示竖屏需求则使用 npm i -S lib-flexible
npm i postcss postcss-pxtorem -D
二.配置和引入
main.js/main.ts
viewport 方案
import "normalize.css";
rem 方案
import "amfe-flexible";
// 有宽屏显示竖屏需求则使用 import "lib-flexible";
import "normalize.css";
根目录创建postcss.config.js
viewport 方案
module.exports = {
plugins: {
"@ttou/postcss-px-to-viewport": { // 配置详情可见 https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0
unitToConvert: "px",
viewportWidth: 750,
unitPrecision: 5,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [/node_modules/],
include: undefined,
landscape: false,
landscapeUnit: "vw",
landscapeWidth: 1920,
},
},
};
'
运行运行
rem 方案
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue({ file }) {
return file.indexOf("vant") !== -1 ? 37.5 : 75; // 37.5用于兼容vant-ui，75基于750px设计稿
},
unitPrecision: 5,
propList: ["*"], // 需要转换rem的元素
// selectorBlackList: ["van-"],
replace: true,
mediaQuery: false,
minPixelValue: 0,
exclude: /node_modules|floder_name/i,
},
},
};
'
运行运行
注意：如果运行代码阶段报CommonJS的错误，把.js后缀改为.cjs就可以编译了（viewport 方案）
注意：
由于postcss-px-to-viewport不在支持了，统一换成postcss-mobile-forever，大家可以去看看，链接我发下面
postcss-mobile-forever - npm
