Vue2.0配置postcss-px2rem
2019-08-01 本文已影响0人
小理有趣
1、安装node(自带npm包管理工具)
2、安装vue2.x脚手架:npm install vue-cli -g,控制台输入vue list查看是否安装成功
3、创建项目:vue init webpack my-project
4、安装postcss-px2rem:npm install postcss-px2rem
5、配置:找到文件build/vue-loader.config.js,添加如下:
const px2rem = require('postcss-px2rem')
// 配置remUnit
postcss: function() {
return [px2rem({remUnit: 75})];
}
6、在index.html中添加根font-size大小
<script>
document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth || document.body.clientWidth) /10 + 'px';
window.addEventListener("resize",()=>{
document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth || document.body.clientWidth) /10 + 'px';
});
</script>