移动端适配rem

一.安装依赖

yarn add lib-flexible postcss-pxtorem

二.postcss.config.js

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      "rootValue": 75,
      "propList": ["*"]
    }
  }
}

三、main.js中导入

import 'lib-flexible/flexible'

四.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.样式重置

//main.js
import ‘@/assets/css/reset.css’