vue工程px转rem，postcss-px2rem插件的使用，移动端适配方案

vue工程实现px转rem

使用px单位在不同宽高比设备上显示样式比例有差异，rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。可以使用rem实现自适应。

postcss-px2rem：是可以将代码中px自动转化成对应的rem的一个插件.
先安装插件

npm i postcss-px2rem --save -dev

在postcss.config.js中添加配置

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      "browsers": ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 8']
     },
     // 1rem = 20px
     'postcss-px2rem':{'remUnit':20}    //配置rem基准值，75是iphone6标准
  }
}

然后再新建一个js文件 setRem.js 这个可以实现在分模块打包的情况下针对每一个模块 配置不同的remSize来实现不同的模块有不同的转换基数。

export default function setRemInit(baseWidth = 750) {
// baseSize 是用来设置html font-size的大小 。
function setRem(){
  const dpr = window.devicePixelRatio;//当前显示设备的物理像素分辨率与CSS像素分辨率之比。
  const currentWidth = document.documentElement.clientWidth;
  let remSize = 0;
  let scale = 0;
  let baseSize = 20; // 1rem = 20px
  scale = currentWidth / baseWidth; // 当前页面宽度相对于 750 px(设计稿尺寸)的缩放比例，可根据自己需要修改。
  remSize = baseWidth / baseSize; 
  remSize = remSize * scale; 
  document.documentElement.style.fontSize = remSize + 'px'; // 设置页面根节点字体大小
  document.documentElement.setAttribute('data-dpr', `${dpr}`);
}
  // 初始化
  setRem();
  // 改变窗口大小时重新设置 rem
  window.addEventListener('resize', setRem);
}

在对应模块index.js引用新增的js

import setRemInit from '@/plugins/setRem' ///rem
setRemInit()

over