5分钟带你看懂：vue项目的移动端rem适配

本文简单介绍一下vue项目移动端的rem适配准备。

首先移动端肯定用的是vant组件库，在开发移动端之前，通常要做好rem适配，当然也可以的vw适配，这里简单介绍一下rem适配。

首先看一下vant官网上的介绍

需要这两个插件：

步骤一：安装 

npm i amfe-flexible

步骤二：引用  （在main.js里面引用一下下）

import 'amfe-flexible'

步骤三：看效果，你可以在浏览器上看到有一个font-size:37.5px的字样

到这时候就会有同学问，这不就行了，为什么还要安装另外一个  postcss-pxtorem

不知道大家有没有发现，这时候我们只是网页的根字号变成了37.5px，但是网页上的width、height等样式还是用的px，也就是说，还没生效，这时候我们需要把左右的大小自动转换成rem

postcss-pxtorem就是来实现这个功能的，不需要你手动去计算每一个的px等于多少rem了

二、配置 postcss-pxtorem

步骤一：

npm install postcss-pxtorem -D

步骤二：然后在项目根目录中创建 .postcssrc.js 文件

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

说明一下，postcss-pxtorem插件会自动去寻找根目录下 名字为，.postcssrc.js 的文件夹，来选择对应的配置（如果有同学看到我前面关于 eslint的配置，你就会发现，所有的插件配置文件都是后面加了个 rc，有兴趣的可以往前面翻一下）

其中这个37.5是按照设计稿是375来算的，如果是750的设计稿，你如果写37.5，就需要在测量的时候手动除以二了，不然会很大！如果写75的话，vant组件库又会变得很大，因为vant组件库是按照375来设计的，这么一来，就会很麻烦，有没有方便的写法呢？

那肯定是有的，直接修改 postcss的配置文件成如下代码即可：

/**
 * PostCSS 配置文件
 */

module.exports = {
  // 配置要使用的 PostCSS 插件
  plugins: {
    // 配置使用 autoprefixer 插件
    // 作用：生成浏览器 CSS 样式规则前缀
    // VueCLI 内部已经配置了 autoprefixer 插件
    // 所以又配置了一次，所以产生冲突了
    // 'autoprefixer': { // autoprefixer 插件的配置
    //   // 配置要兼容到的环境信息
    //   browsers: ['Android >= 4.0', 'iOS >= 8']
    // },

    // 配置使用 postcss-pxtorem 插件
    // 作用：把 px 转为 rem
    'postcss-pxtorem': {
      rootValue ({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*']
    }
  }
}

其中

结束！