在 vue 中使用 postcss-pxtorem 进行移动端适配

介绍

root em（rem）是一个相对单位，基准是相对于 html 元素的字体大小，控制整个页面的元素大小比例，可以实现适配移动端各种分辨率的机型下对设计图的等比缩放

安装依赖

npm i postcss-pxtorem@5.1.1 amfe-flexible -D

postcss-pxtorem 需要指定版本的原因是它的最新版本依赖 postcss@8.0 以上，但是 vue-cli 中集成的 postcss 版本低于 8.0，为避免出现兼容问题所以选择降低版本

• postcss-pxtorem 插件实现将 px 转成 rem
• amfe-flexible 插件进行 HTML 根节点的初始化

配置

首先在入口文件的顶部引入 amfe-flexible

src/main.js

import 'amfe-flexible';
import Vue from 'vue';
// ...

在根目录下创建 postcss.config.js，粘贴以下代码，可按需修改配置

module.exports = {
  plugins: {
    // 这个工具可以实现自动添加 CSS3 前缀
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 37.5, // 根字体大小，如果设计图是750的话 记得除2
      minPixelValue: 1, // 最低像素单位
      unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
      propList: ['*'], // 作用在哪些属性上 这里用的是通配符
      replace: true, // 替换包含rem的规则，而不是添加回退
      exclude: /node_modules/i, // 排除目录
      selectorBlackList: ['vant-', 'el-', 'ant-'], // 排除 class
      mediaQuery: false // 允许在媒体查询中转换 px
    }
  }
};

效果

PC 端

移动端

代码如下

<template>
  <div class="hello">
    <p class="title">阿斯蒂芬似懂非懂是否胜多负</p>
    <p class="sub-title">士大夫第三方第三方士大夫四大防守打法第三方胜多负少的</p>
    <div class="button">确定</div>
  </div>
</template>
<style lang="less">
  .title {
    font-size: 12px;
  }

  .sub-title {
    font-size: 8px;
  }

  .button {
    display: inline-block;
    width: 80px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #ffffff;
    border-radius: 4px;
    background-color: #42b983;
    font-size: 14px;
    box-shadow: 0 0 1px 4px fade(#42b983, 10%);
  }
</style>

注意事项

如果有不想转换的单位（固定大小）

1. 可以将 1px 写为 1PX，
2. 或者设置 postcss.config.js 中 postcss-pxtorem 插件的 propList: ['*'] 中追加排除属性，如：['*', '!border-radius', '!width']