Vue2.0配置postcss-px2rem

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>


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。