一、方案一
autoprefixer + postcss-px2rem
使用此方案,可以直接按照设计稿的px来开发,自动生成rem来适配各个屏幕
1. 下载相关npm包
npm install autoprefixer -S
npm install postcss-px2rem -S
2. 在文件根目录下创建 .postcssrc.js文件
下面为配置项,如果没执行,重启下项目
const AutoPrefixer = require("autoprefixer");const px2rem = require("postcss-px2rem");module.exports = ({ file }) => { let remUnit; if (file && file.dirname && file.dirname.indexOf("vant") > -1) { // 解决vantUI样式问题 remUnit = 20; } else { remUnit = 32; } return { plugins: [ px2rem({ remUnit: remUnit }), AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] }) ] };};
你可能在开发过程中遇到vant样式变小的问题,设置如下即可
// 如果你的设计稿上的宽度是750,则设置75,这样可以按照设计稿上的宽度来开发了~.~
if (file && file.dirname && file.dirname.indexOf("vant") > -1) { remUnit = 37.5;} else { remUnit = 75;}
报错:
如果遇到下面这种报错,请减低autoprefixer版本号,一般为@8.0.0版本就可以使用
Invalid PostCSS Plugin found at: plugins[1]