Vue px转rem配置详解

什么是px和rem

px：是像素，是网页最常用的长度单位。
rem：是一种相对单位，它是根据根元素的字体大小而定的单位，也就是说当根元素的字体大小发生变化时，原本以rem作为单位的元素也会随之改变。

为什么需要将px转为rem

移动端屏幕尺寸多种多样，我们使用不同的屏幕访问页面就会发现页面布局等效果有差异。
根据设备宽度动态改变html的font-size大小，按照设计稿的像素点来计算rem，能够实现等比例缩放，适应不同分辨率的屏幕。

基本思路

首先，我们需要在页面的<head>标签中设置 viewport，用于控制移动端的宽度和缩放比例。
接着，通过 JavaScript 来动态计算并设置根元素的字体大小，从而实现使用 rem 单位来自适应不同屏幕尺寸的目的。

设置viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

在Vue项目中配置px转rem

第一步：安装 postcss-px2rem 插件

在项目跟路径下执行以下命令即可完成安装

npm install postcss-px2rem --save

第二步：配置 postcss.config.js

在项目的根目录下新建 postcss.config.js 文件，输入以下内容：

module.exports = {
  plugins: {
    'postcss-px2rem': {
      remUnit: 75 // 设计稿宽度/10，即750/10
    }
  }
}

其中，remUnit 表示设计稿宽度/10，例如如果设计稿的宽度为750，那么设置为 75。

第三步：安装 vue-cli-plugin-px2rem 插件

在项目跟路径下执行以下命令即可完成安装

npm install vue-cli-plugin-px2rem --save-dev

第四步：配置 vue.config.js

在项目的根目录下新建 vue.config.js 文件，输入以下内容：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 75 // 设计稿宽度/10，即750/10
          })
        ]
      }
    }
  }
}

示例说明1：使用 px 单位

<template>
  <button class="btn">Click me!</button>
</template>

<style>
.btn {
  width: 100px;
  height: 40px;
  font-size: 16px;
  background-color: green;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  outline: none;
}
</style>

示例说明2：使用 rem 单位

<template>
  <button class="btn">Click me!</button>
</template>

<style>
.btn {
  width: 1.33333rem;
  height: 0.53333rem;
  font-size: 0.21333rem;
  background-color: green;
  color: #ffffff;
  border: none;
  border-radius: 0.06667rem;
  outline: none;
}
</style>

可以看到，通过配置之后，我们只需要在 CSS 中设置 px 单位的样式，插件会自动将其转换为 rem 单位，并自动计算根元素字体大小。

总结

通过以上方法，我们能够很方便地实现 Vue 项目的 px 转 rem 功能，从而能够更好地适配移动端不同屏幕尺寸和分辨率的需求。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue px转rem配置详解 - Python技术站

vue px转rem配置详解