移动端布局px转化为rem

问题：

为什么 要将px转化为rem呢？因为在移动端，很多设备的宽度和高度是不一样的。所以呢我们就不能使用px把宽度大小写死。而rem是相对HTML根元素的font-size的大小而言的。所以我们就希望在不同的设备的里面，css的样式会有一样的效果。

正文如下

第一步：

npm i postcss-plugin-px2rem --save

官网：https://www.npmjs.com/package/postcss-plugin-px2rem

第二步：

在src目录同级创建setRem.js文件

setRem.js里面内容

/*
 * html根节点设置font-size
 * @param {designwidth} Number 设计稿的宽度
 */
export const setRem = (designwidth) => {
  function fontSizeFun () {
    const fontSize = 100
    const relwidth = document.documentElement.clientWidth
    const relfontSize = fontSize * relwidth / designwidth + 'px'
    document.getElementsByTagName('html')[0].style.fontSize = relfontSize
  }
  fontSizeFun()
  window.onresize = fontSizeFun
}

第三步：

在src目录同级创建postcss.config.js文件

postcss.config.js里面内容

module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: 'last 2 versions'
    }),
    require('postcss-plugin-px2rem')({
      remUnit: 75, // (设计稿的宽度/10)
      exclude: /node_modules/  // 不影响node_modules文件夹
    })
  ]
}

第四步：

在main.js里面引入setRem.js

import { setRem } from '../setRem.js'
setRem('750') // 调用函数，参数是设计稿的宽度

效果图：我们一般都使用iphone6,7,8作为调试机，宽度为375px。
效果案例的宽度我设置为750px，在html里面显示为7.5rem，实际在测试机里面的宽度还是375px

另外：我们把测试机换位iPad的，粉色盒子的宽度也是占满测试机的宽度(这里宽度就不再是375，而是768)；因为我们的盒子css里面的实际的宽度750px等于设计稿的宽度750px，所以宽度会占满测试机。

结论：对于设计稿原型里面其它的宽高是多少px，我们在项目里面css里面直接写多少px即可。