- 插件安装
npm i lib-flexible
npm i px2rem-loader
npm i postcss-pxtorem
- 插件使用
import 'lib-flexible'
- 插件配置
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 192
})
],
dist: {
src: 'src/*.css',
dast: 'build'
}
}
}
},
chainWebpack(config) {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.use('px2rem-loader')
.loader('px2rem-loader')
.options({
remUnit: 192,
remPrecision: 8
})
}
- 使用postcss-pxtorem适配: 与src平级创建postcssrc.js文件(有个.)
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
}
}
}
- 修改flexible.js
- 找到node_modules下的lib-flexible插件
- 根据需求修改refreshRem方法
- 重启项目
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540 ) {
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
- 注: px2rem-loader 与 postcss-pxtorem 一个就成,其余配置一样