Vue脚手架里面使用rem

1、安装两个插件
npm i amfe-flexible --save //自适应插件
npm i postcss-px2rem --save //px转rem插件，只能在css中改

2、main.js引入
import rem from 'amfe-flexible' //引入插件
Vue.use(rem) //全局注册插件

3、package.json中添加如下代码：
"postcss":{
//plugins表示插件
    "plugins":{
      "autoprefixer":{},//自动转换
//"remUnit":75表示是按照750px的这个尺寸设计的
      "postcss-px2rem":{
        "remUnit":75
      }
    }
  }

4、需要重新 npm run serve

5、需要在css中设置样式，在行内样式style里面写无效
.s1{
  /* 30px/75=0.4rem */
  font-size:30px;
}

6、html的根元素 font-size会根据屏幕的变化而变化 但是元素rem值不会
效果：页面的尺寸也会根据屏幕的变化而变化