基于vue-cli3 + vant2
方案一：lib-flexible +postcss-pxtorem
使用：lib-flexible + postcss-pxtorem
lib-flexible 用于设置 rem 基准值
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
autoprefixer 自动补全css浏览器前缀
1.安装lib-flexible（用于设置 rem 基准值）
npm install amfe-flexible --save-dev
2.main.js文件中引入lib-flexible
import 'amfe-flexible'
3.安装postcss-pxtorem（postcss-pxtorem是 postcss 插件，用于将单位转化为 rem）
npm install postcss-pxtorem --save-dev
4.安装autoprefixer（Autoprefixer是postcss的插件，自动补全css浏览器前缀）
npm install autoprefixer --save-dev
5.在public/index.html加入meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
minimum-scale=1, user-scalable=no">
6.在根目录下新建postcss.config.js文件
值得注意的是: postcss-pxtorem 存在第三方组件库兼容性的问题。比如在设计稿为750px时使用vant组件库会将vant组件的样式缩小。
vant组件库的设计稿是按照375px来开发的。因此在
viewportWidth为750px时会出现转换问题。
const autoprefixer = require('autoprefixer');const pxtorem = require('postcss-pxtorem');
module.exports = ({ file }) => { let remUnit; if (file && file.dirname && file.dirname.indexOf('vant') > -1) { remUnit = 37.5; } else { remUnit = 75; } return { plugins: [ autoprefixer(), pxtorem({ rootValue: remUnit, propList: ['*'], selectorBlackList: ['van-circle__layer'] }) ] };};
哈哈哈哈哈哈哈哈哈哈
lib-flexible作者在github明确的表示lib-flexible这个解决方案可以放弃使用了，所以请大家使用viewport。
viewport的单位vw、vh
vw、vh将viewport分成了一百份。vw即viewport widthvh即viewport height1vw等于视图单位的1%的宽度
1vh等于视图单位的1%的高度
如果设计稿的视图为375px 那么1vw 等于 3.75px
方案二：弃用lib-flexible用post-css-to-viewport
1.安装postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
2.安装autoprefixer（Autoprefixer是postcss的插件，自动补全css浏览器前缀）
npm install autoprefixer --save-dev
2.在根目录下新建postcss.config.js文件
const path = require('path');const autoprefixer = require('autoprefixer');module.exports = ({ webpack }) => { const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750; return { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { unitToConvert: 'px', //需要转换的单位，默认为"px" viewportWidth: viewWidth, // 视窗的宽度，对应的是我们设计稿的宽度 viewportHeight: 1334, //视窗的高度，根据375设备的宽度来指定，一般指定667，也可以不配置 unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） propList: ['*'], // 能转化为vw的属性列表 viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw fontViewportUnit: 'vw', //字体使用的视口单位 selectorBlackList: [], //指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 mediaQuery: false, // 允许在媒体查询中转换`px` replace: true, //是否直接更换属性值，而不添加备用属性 exclude: [/node_modules/], //忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 landscape: false, //是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: 'vw', //横屏时使用的单位 landscapeWidth: 1334 //横屏时使用的视口宽度 } } }}
需要注意的配置
propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的selectorBlackList：转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换
注意：这里使用path.join('node_modules', 'vant')是因为适应不同的操作系统，在mac下结果为node_modules/vant，而在windows下结果为node_modules\vant
参考链接：
