先看效果图

px已变成rem,且会根据宽度不同，自动调节大小
在这里插入图片描述

在这里插入图片描述

1.安装lib-flexible

解决移动端适配问题

npm i lib-flexible --save

在这里插入图片描述

2.main.js引入lib-flexible

import 'lib-flexible/flexible'

在这里插入图片描述

3.在index.html页面设置meta标签（设备宽度以及缩放比例）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

在这里插入图片描述

4.安装postcss-pxtorem

用于将px转化为rem
版本过高在项目启动时会报错，安装5.1.1即可

npm i postcss-pxtorem@5.1.1

在这里插入图片描述

5.在根目录下创建postcss.config.js配置文件

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*'],
        },
    },
};

在这里插入图片描述

6.测试

在app.vue中写入内容

<template>
  <div id="app">
      <p>Hello World</p>
      <p>Hello World</p>
      <p>Hello World</p>
      <p>Hello World</p>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {};
    },
    methods:{
    }
  }
</script>

<style>
    p {
        font-size: 30px;
    }
  #app {
    text-align: center;
    margin-top: 60px;
  }
</style>