移动web端适配

使用rem进行移动web端适配，postcss-plugin-px2rem可以使得css中的px转换为rem渲染到web页面上

01 postcss-plugin-px2rem的基本使用

首先下载postcss-plugin-px2rem：npm i postcss-plugin-px2rem

其次在postcss.config.js中配置以下信息

 module.exports = {
  rootValue: 100,   // width:100px 渲染到页面上后width: 100px / rootValue = 1rem
  unitPrecision: 5, //允许REM单位增长到的十进制数字。
  propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
  propBlackList: [], //黑名单
  exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
  selectorBlackList: [], //要忽略并保留为px的选择器
  // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
  // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
  mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
  minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
}

02 原理

先牢记一个公式：渲染的大小= rem * fontSize

以UI设计稿宽度为 750px 为例, 按钮的宽度为200px，渲染到页面上后(以rootValue:100为例)，此时设计稿宽度为7.5rem，按钮宽度为2rem

在phone6上，iPhone6的宽度为375px，设计稿 7.5rem * fontSize = 375px,fontSize = 375 / 7.5 = 50px，此时按钮的宽度为：2rem * 50px = 100px，是在宽度为750px的设计稿上宽度的一半

当在其他设备上时，比如宽度为 400px，fontSize = 400px / 7.5rem，因为是根据宽度为750px的设计稿来进行计算。

不同设备的屏幕大小不同，因此需要根据设备屏幕的宽度计算fontSize大小

03 计算fontSize

根据document.documentElement.clientWidth获取当前设备屏幕的宽度，在设备屏幕变化时，重新计算fontSize大小

// 设置 rem 函数
function setRem () {
  let width = document.documentElement.clientWidth
  let fontSize = width / 7.5 
  document.documentElement.style.fontSize = fontSize + 'px'
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}
​

\