vue自适应（配置postcss-px2rem）

一、vue自适应（配置postcss-px2rem）

采用插件postcss-px2rem结合动态更新根节点的font-size 的js代码共同完成，实现在不同的屏幕等比例放大或缩小页面

1. postcss-px2rem（命令行安装）

npm i postcss-px2rem --save

2. 动态更新根节点的font-size 的js代码

在app.vue的mounted函数中添加如下代码：

mounted () {
    const computed = function () {
      // 设计稿宽度：1920
      const desW = 1920
      const devW = document.documentElement.clientWidth
      if (devW > 1280) {
        document.documentElement.style.fontSize = devW / desW * 75 + 'px'
        // 这里的75是使用postcss-px2rem插件时，配置的remUnit的参数值
      } else {
        document.documentElement.style.fontSize = 50 + 'px'
      }
    }
    computed()
    window.addEventListener('resize', computed, false)
  }
// 默认字体的大小和最小展示宽度，解决网页端在平板上的样式混乱问题
#app {
  font-size: 14Px  !important;
  min-width: 1280Px;
}

3. 配置postcss-px2rem

px2rem的配置放在vue.config.js中

css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            // 以设计稿750为例， 750 / 10 = 75
            remUnit: 75 
          })
        ]
      }
    }
  }

举个例子：
设计稿1920px,宽度300px,样式表中定义样式为300px（第一张图）,但是在浏览器中的宽度是4rem（300/75）（第二张图），在根据rem这个相对长度单位，相对于根元素(即html元素)font-size计算值的倍数，在浏览器中显示为4rem*根元素的font-size值，这就是显示的宽度

第1张图：

第2张图：

第3张图：

补充：
另一种lib-flexible（阿里伸缩布局方案）和 postcss-px2rem（px转rem）相结合来实现的方式

1.安装lib-flexible命令

npm install lib-flexible --save-dev

2.修改flexible.js 代码（全局搜索refreshRem）
这是针对移动端的源码中写死了设计方案，在安装好lib-flexible和 postcss-px2rem后，修改为下面的代码就可以了。其中的if判断是根据自己需求的
如下面代码禁掉的是原有的，新加的是但当前浏览器宽小于810则固定为810px宽，这样就实现了vue pc端自适应

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        if(width/dpr<810){
            width = 810 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

3.postcss-px2rem安装及配置如上

这个方法存在小问题，他修改了安装的依赖文件flexible.js中的代码，重新拉取代码时容易忘记，知道展示效果不对时才会找到文件并修改回来