vue利用rem适配大屏的详细步骤

使用rem适配大屏可以让页面在不同分辨率下显示效果更为一致。以下是详细步骤：

1. 安装 postcss-pxtorem插件

在项目根目录下执行以下命令进行安装：

npm install postcss-pxtorem --save-dev

2. 配置 postcss.config.js 文件

在项目根目录下创建postcss.config.js文件，输入以下代码：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 192, // 设计稿宽度的1/10，单位可以改成任意值
      propList: ['*'],
    },
  },
};

其中，rootValue表示设计稿宽度的1/10，propList表示需要转换的属性，这里设置为全部。

3. 在 main.js 中引入配置文件

在main.js中引入配置文件：

import './postcss.config.js'

4. 使用rem进行布局

在Vue组件中，使用rem进行布局。例如：

<style scoped>
  .container {
    width: 10rem; /* 相当于设计稿中的100px */
  }
</style>

<template>
  <div class="container">
    <!-- 内容 -->
  </div>
</template>

以上是vue利用rem适配大屏的详细步骤。