vue中rem的配置的方法示例

当我们在使用vue框架开发网站时，经常需要使用rem单位进行网站的样式设计，然而，在不同的屏幕大小下，rem的大小也需要跟着变化，因此我们需要针对不同的屏幕尺寸去设置不同的rem大小。以下是在vue中配置rem的方法示例。

一、安装插件

在vue中配置rem需要使用一个插件，即postcss-pxtorem，我们可以通过以下命令进行安装：

npm install postcss-pxtorem -D

二、配置postcss.config.js

安装完毕后，需要在项目根目录下创建一个postcss.config.js文件，并在其中进行配置。以下是一个示例：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 1rem等于16px
      unitPrecision: 5, // rem保留小数位数
      propList: ['*'], // 需要转换成rem的属性，通配符即全部属性都会转换
      selectorBlackList: [], // 不进行转换的样式类名
      replace: true, // 是否替换原有样式
      mediaQuery: false, // 是否允许在媒体查询中转换px
      minPixelValue: 0 // 小于等于0px的样式不转换
    }
  }
}

三、使用vrem插件

配置完成后，在vue组件中就可以使用vrem插件，以便在不同的屏幕尺寸下自动调整rem大小。以下是一个示例：

<template>
  <div class="container">
    <p class="title">这是一个标题</p>
    <p class="text">这是一段正文</p>
  </div>
</template>

<style scoped>
.container {
  margin: 0 auto;
  max-width: 640px;
  padding: 1rem;
}

.title {
  font-size: 2rem;
  text-align: center;
}

.text {
  font-size: 1.2rem;
  line-height: 1.5;
  text-indent: 2rem;
}
</style>

在上述示例中，我们使用了vrem插件进行了屏幕适配，通过配置postcss.config.js文件中的rootValue属性，确定页面中1rem等于多少像素，再通过在样式中设置相应的rem单位，便可根据屏幕分辨率自适应地改变页面字号大小。在这个示例中，我们配置了1rem等于16像素，因此在页面中字号大小等于2rem时，实际上相当于32像素，1.2rem相当于19.2像素。同时，我们还在样式中使用了限制最大宽度、内边距等方法进行了页面的简单布局。

接下来，再给大家展示一个可以动态更新根元素字号的示例：

import Vue from 'vue'
import Vrem from 'vrem'

Vue.use(Vrem)

const app = new Vue({
  el: '#app',
  data: {
    fontSize: 16
  },
  mounted() {
    const html = document.getElementsByTagName('html')[0]
    html.style.fontSize = this.fontSize + 'px'
    window.onresize = () => {
      const windowWidth = document.documentElement.clientWidth || document.body.clientWidth
      if (windowWidth > 768) {
        this.fontSize = 32
      } else {
        this.fontSize = 16
      }
      html.style.fontSize = this.fontSize + 'px'
    }
  }
})

我们可以看到，在这个示例中，我们使用了Vue插件vrem，然后在mounted函数中定义了根元素的字号大小，并且通过window.onresize函数实现了根据屏幕大小动态更新字号大小。这样，我们便可以在不同的屏幕尺寸下自适应地改变页面的字号大小。

上述两个示例均是在vue中配置rem的方法，通过使用插件和动态更新的方式，实现了在不同的屏幕尺寸下自适应地改变页面字号大小的效果。