vue的rem配置1.安装lib-flexible2.main.js中引入3.在postcss.config.js中配置

1.安装lib-flexible

npm i lib-flexible --save
npm i postcss-pxtorem --save

2.main.js中引入

import 'lib-flexible/flexible.js'

3.在postcss.config.js中配置

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
        // 设计稿宽度的1/10
      "rootValue": 75,
      "propList":["*"]
    }
  }
};

4.rem是为移动端而生的要在pc和pad上跑动,一定要在App.vue文件中加

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>
<style>

 #app{
    width:10rem;
    margin-left:auto;
    margin-right:auto;
}
</style>

5.设置页面宽度

<body  style="max-width:750px;margin:0 auto;"> </body>