vuerem自适应配置

Vue-rem 自适应配置是一种在 Vue.js 中使用 rem 单位进行移动端适配的方法。它基于 rem 单位的特性，根据设备的屏幕宽度动态计算出合适的 rem 值，从而实现页面的自适应。

下面是一个简单的 Vue-rem 自适应配置示例：

1. 首先，安装 postcss-pxtorem 插件：

npm install postcss-pxtorem --save-dev

2. 在项目的根目录下创建 postcss.config.js 文件，并添加以下内容：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16,  // 基准大小 16
      propList: ['*'], // 需要转换的属性，* 表示全部
      selectorBlackList: ['van'], // 忽略转换正则匹配项
    },
  },
};

3. 在项目的 main.js 文件中引入 postcss-pxtorem 插件：

import 'lib-flexible/flexible';

4. 在组件中使用 rem 单位进行样式编写，例如：

<template>
  <div class="container">
    <div class="box" :style="{ width: '2rem', height: '2rem' }"></div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  padding: 0.5rem;
}

.box {
  background-color: #f00;
}
</style>

通过以上配置，Vue-rem 自适应能够根据设备的屏幕宽度自动计算出适应的 rem 值，从而实现页面的自适应效果。