H5移动端rem适配

一、为什么要进行移动端适配

移动端设备的尺寸很多，而UI设计稿一般只会基于一个尺寸（一般是750px）进行设计。假如开发人员完全基于该设计稿进行开发，就会出现一种现象，在不同尺寸的设备上，页面的展示效果各不相同，甚至可能出现布局错乱或者出现横向滚动条等情况。因此，开发人员就需要考虑如何让页面内容能够自适应设备尺寸，在设备尺寸较大时内容大一些，设备尺寸小的时候内容也能缩小，让页面在不同的设备尺寸下尽量呈现一致的展示效果。

二、适配方案

目前流行的移动端适配方案有两种，rem和viewport，由于viewport单位得到众多浏览器的兼容，现在更多的人推荐使用viewport方案来解决移动端适配问题。

三、rem方案实现步骤总结

1、安装插件

npm install amfe-flexible --save
npm i postcss-pxtorem@5.1.1  --save  //这个要装5.1.1版本的，高版本会报错

2、main.js中全局引入

import 'amfe-flexible';

3、postcss.config.js中配置

// postcss.config.js
module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'] // 需要被转换的属性
    }
  }
}

4、public/index.html添加viewport元数据标签，使页面宽度和设备宽度一致

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<!--
含义如下：
* width=device-width：视口宽度和设备保持一致
* initial-scale=1：视口的默认缩放比例1.0
* maximum-scale=1：最大缩放比例1.0
* minimum-scale=1：最小缩放比例1.0
* user-scalable=no：不允许用户自行缩放
-->

三、viewport方案实现步骤总结

1、public/index.html添加viewport元数据标签，使页面宽度和设备宽度一致

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

2、在postcss.config.js文件中配置postcss-px-to-viewport

module.exports = ({ file }) => {
  const vwUnit = file && file.indexOf('vant') !== -1 ? 375 : 750;
  return {
    plugins: {
      'postcss-px-to-viewport': {
        viewportWidth: vwUnit, // 设计稿的宽度
        unitPrecision: 5, // 转换后的位数，即小数点位数
        viewportUnit: 'vw', // 转换成的视窗单位
        propList: ['*'], // 要进行转换的属性，如果某个属性不进行转换，只需在其前加个“!”即可
        selectorBlackList: [], // 不进行转换的选择器
        minPixelValue: 1, // 小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      },
    },
  };
};

四、代码展示

比如项目中我们这样写：

.login-form {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    .title {
      position: absolute;
      top: -50px;
      font-size: 24px;
      color: #fff;
      left: 0;
      right: 0;
      text-align: center;
    }
  }

那我们代码的产出就是下面这样的 ，插件帮我们自动转换单位。

login-wraper .login-form {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    padding: .53333rem; // 注意这个就是转换后的单位
    box-sizing: border-box;
    border-radius: .26667rem;  // 注意这个就是转换后的单位
}