vue+vant h5屏幕适配方案

1,172 阅读1分钟

一、方案一

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]