Vue-cli4.X项目中使用postcss-px2rem

1. 下载安装

   npm install postcss-px2rem 或者 cnpm install postcss-px2rem

2. vue.config.js（如果没有就创建）里面

   const px2rem = require('postcss-px2rem')
    //基准大小 ,需要和autoRem.js中相同
   const baseSize = 16
   const postcss = px2rem({remUnit: baseSize})
   // 更多配置查看 vue.配置官网
   module.exports = {
     css: {
       loaderOptions: {
         postcss: {
           plugins: [postcss]
         }
       }
     }
   }
   
   

3. 在src下面创建一个autoRem.js文件 (file name 随便取)

   // 基准大小
   const baseSize = 16
   // 设置 rem 函数
   function setRem() {
     // 当前页面宽度相对于 750 (设计稿)  宽的缩放比例，可根据自己需要修改。
     const scale = document.documentElement.clientWidth / 1536
     // 设置页面根节点字体大小
     document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
   }
   // 初始化
   setRem()
   // 改变窗口大小时重新设置 rem
   window.onresize = function() {
     setRem()
   }
   
   
   

4. 引用autoRem.js在main.js里面使用

   import Vue from 'vue'
   import App from './App.vue'
   
   import './utils/rem'
   
   Vue.config.productionTip = false
   
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   
   Vue.use(ElementUI)
   
   new Vue({
     render: h => h(App),
   }).$mount('#app')
   
   

5. 然后重启

   npm run serve  // 启动命令根据自己项目来
   

注意：此文章只为自己学习记录，侵权删除，参考： 一起搞前端