关于 flexible.js 资源请自行下载. http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js
这里 ssr 我设置了false,因为报错提示 document is not defined
plugins: [
{
src: '~plugins/three_sides/flexble.js', ssr: false
}
],
为了配合使用我安装了 postcss-pxtorem 以及 autoprefixer
postcss: [
require('postcss-pxtorem')({
// remUnit: 37.5,
propList: ['*'],
rootValue: 37.5, //默认根目录字体大小(px)
unitPrecision: 5, //保留小数位
// selectorBlackList: [''], //过滤的类名
replace: true, //默认直接替换属性
mediaQuery: false,
minPixelValue: 12, //所有小于设置的样式都不被转换
}),
require('autoprefixer')({
overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
}),
],
这里 rootValue 我给到了 37.5 。
最开始用vscode自带的插件(px to rem)转换的时候我设置的是16,样式基本就比较正常了。
但是后来发现van里面样式在切屏转换的时候一些基础的样式因为还是用的px导致没有响应的放大或缩小,于是我重新用了postcss-pxtorem,随之而来的问题就是整个 vant 的 size 很大,于是最终用了 37.5