做移动端h5适配的,vue-cli2.x的通过使用
lib-flexable
和px2rem-loader
其实就是通过去把px转换成rem ; 这里有链接 点击
vue-cli3.+webpack
安装依赖:
npm install lib-flexible -S
npm install postcss-plugin-px2rem -D
postcss-plugin-px2rem; px2rem是postcss的一个插件
在
main.js
中引入flexible.js
文件,(如果是需要兼容到pc端适配,需要修改其中代码)
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;//修改后的,之前的是固定值540
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
//main.js
import 'lib-flexible';//这里最好把修改的flexible.js,单独的拿出来放在自己的文件夹中来进行引入,避免别人安装依赖重复修改文件
在
vue.config.js
中配置postcss-plugin-px2rem
module.exports={
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
propList: ['*'],
rootValue: 192,//这里是设计稿的宽度/10
}),
]
},
},
},
}