最近公司项目进行了优化，优化项中有前端自适应的内容，考虑到客户的电脑差异。于是整理了一套前端自适应的方案。话不多说，上干货。

        第一：pxtorem插件

                需要借助这个插件对系统中的px进行rem的转化，当然如果你全手动写rem，那你也可以不用🤭。首先npm i postcss-pxtorem@5.1.1 --save，注意是5.1.1版本的插件，最新版本的插在使用中碰到了一点问题。下载完成以后如图对vue.config.js进行配置

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 16, // 默认根元素px
                        unitPrecision: 5, // 允许rem单位增长到的10进制数字，小数点后的保留位
                        propList: ['*'],
                        exclude: /node_modules\/[^element_ui]/, // 忽略的目录（正则匹配转换element-ui的样式）
                        selectorBlackList: ['.retain'], // 要忽略并保留为px的选择器
                        mediaQuery: true, // 允许媒体查询转换px
                        minPixelValue: 1 // 替换的最小像素值
                    })
                ]
            }
        }
    }
}

 注释上都写的很清楚啦！

第二：rem函数监听window.onresize事件

export const setHtmlRem = (width = 1920, px = 16) => {
  document.documentElement.style.fontSize = document.documentElement.clientWidth / (width / px) + 'px'
  window.onresize = (function () {
    let t
    return () => {
      if (t) { clearTimeout(t) }
      t = setTimeout(() => {
        if (document.documentElement.clientWidth > 1024 && document.documentElement.clientWidth <= 2304) {
          document.documentElement.style.fontSize = document.documentElement.clientWidth / (width / px) + 'px'
        } else if (document.documentElement.clientWidth <= 1024) {
          // 小于1024情况保证正常显示
          document.documentElement.style.fontSize = '9px'
        } else if (document.documentElement.clientWidth > 2304) {
          // 大于自适应最大支持px后处理
          document.documentElement.style.fontSize = '19.2px'
        }
      }, 100)
    }
  }())
}

         这里我根据浏览器各缩放程度下的实际效果进行了一些调整，为了我们的页面和样式不至于变形做了一些限制。并且对body大小进行了一些限制（根据项目实际需求来）

  之前的vue.config.js中配置postcss-pxtorem时使用selectorBlackList来预定义了一个.retain为开头的类名
  eg:
  .retain-body-mini{
    min-width: 1024px;
    max-width: 2304px;
    min-height: 576px;
    max-height: 1296px;
  }
  以上区间范围为基本可完美还原1080p设计稿的视觉感受
  建议将此class类名加在最外层div上
  绝大部分电脑皆属于此范围以内
  对于超出此区间的电脑建议调整屏幕缩放

 第三步：main.js中调用setHtmlRem函数

import { setHtmlRem } from './units/rem'
setHtmlRem() //两个参数，第一个为设计稿屏幕宽度，第二个为此设计稿下的基础字号

 只需要在这里调用一次就好啦。接下来就可以在项目里任意的写px了。哦豁，起飞！

你以为这就完了？？？

不不不！！！

还有这些点你需要注意一下哦！！！

1.pxtorem并不会对标签体上的内联样式进行转换，这意味着我们写代码的时候一定要css分离到style标签体里面去，基本禁止内联样式的出现了，当然如果是一些不涉及到px的部分你还是可以内联的。

2.js去动态的给标签上设置样式的时候，你也不能用px，因为pxtorem这个插件他并不会去处理你的js里的内容，所以在实际运用的时候我们要自己换算一下使用rem单位。下面这种写法就不行了哦。

this.$refs.xxx.style.left = '120px'