移动端适配方案总结之rem

一、rem方案：
1、 什么是rem：
rem是一个相对于页面根元素html的font-size的一个单位，举个例子，假如设置了根元素html的font-size为18px，那么，1rem 等于 18px。由此可知，rem的大小是会随着根元素html的font-size的改变而改变的。rem方案就是利用了这一点，根据不同的屏幕尺寸，来设置不同的根元素html的font-size的大小，以此来达到适配不同屏幕尺寸的目的。

2.2 怎么根据屏幕尺寸设置根元素html的font-size:
我们可以使用手淘的amfe-flexible插件，该插件会根据不同设备的屏幕宽度来设置font-size值，下面来简单看一下其实现原理。以下代码是该插件源码的一部分，可以看到，它先是获取了设备宽度，然后除以10。这里大概意思是，将设备宽度分为10等份，然后将一等份的大小作为html元素的font-size值，也就是说1rem就会等于设备的1等份大小（前面说了1rem等于html元素的font-size值）。

// ...
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
// ...

现在举个例子，750px设计稿下，divA的宽度为50px，在具体开发中，divA的宽度应该是多少rem呢？在写divA的宽度时，我们需要自行进行计算，将其rem值设为x，代入该式子x:50=1:75，得出x≈0.67rem，所以，我们这样设置divA的宽度：

.divA {
  width: 0.67rem;
}

可以看出，将设计稿上的px值转换为rem的过程其实是比较繁琐的，接下来介绍下一个能够自动将px转为rem的插件。

2.3 postcss-pxtorem
postcss-pxtorem是一个能将px转换为rem的工具，这样我们在开发过程中只需要参照设计稿，使用px单位进行开发，由该工具帮我们转换成rem单位即可。只需要在postcss.config.js中进行如下配置：

module.exports = {
  plugins: {
    // 配置使用postcss-pxtorem插件
    // 将px转化为rem样式
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75   // 根元素的值，设计稿的1/10，文件的路径中若有vant,否则就是自己的样式。
      },
      selectorBlackList: [".radius"], // 忽略转换正则匹配项
      // propList: ['*', '!border', '!font-size'], //  存储将被转换的属性列表，'!font-size' 即不对字体进行rem转换
      propList: ["*"], //  存储将被转换的属性列表   //*表示所有的css样式属性，若只是高度"height"
      unitPrecision: 3, // 允许REM单位增长到的十进制数字,小数点后保留的位数。
      // exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
      mediaQuery: true, // （布尔值）允许在媒体查询中转换px。
      minPixelValue: 1 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
    }
  }
}

如果是使用vant作为移动端开发的组件库，那么就需要注意，vant是基于375写的，而我们开发的设计稿大多750px。所以rootValue设置为75的话，vant的样式就小了一半。通过查阅postcss-pxtorem官网可以知道，rootValue的值可以是number/function，当它是函数的时候，postcss-pxtorem处理每个css文件的时候都会来调用这个函数，且被处理的css文件的相关信息会通过参数形式传递给该函数。因此，我们可以判断是vant文件的样式，还是我们的样式，来决定rootValue的大小。