（改完重启项目）

一、需要实现的效果：

分辨率改变，页面都不会被影响

二、使用

1、npm安装依赖

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

2、在main.js中引入lib-flexible

import 'amfe-flexible'

3、配置postcss-pxtorem

  vue-cli2 的配置---在 .postcss.js 文件中的plugins下新增postcss-pxtorem的配置
  vue-cli3 配置方式：在根路径下新增 postcss.config.js 文件,放入下述同样的代码

module.exports = {
  plugins: {
    'autoprefixer': {browsers: 'last 5 version'},
    'postcss-pxtorem': {
      rootValue: 192, // 根据设计图尺寸写，设计图是1920，就写192
      propList: ['*'], // 需要被转换的属性
      selectorBlackList: [] // 不进行px转换的选择器
    }
  }
}

3、直接根据设计稿的尺寸写px就行

注意：该插件不能转换行内样式中的 px

4、PC端只对指定页面做自适应（vue&postcss-pxtorem）

// 根目录的 postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 100,
      minPixelValue: 12,
      propList: ['*'],
      exclude: (e) => { // 不包含
        if (/src(\\|\/)views(\\|\/)Screen/.test(e)) { // Screen是指定页面生效
          return false;
        }
        return true;
      },
    },
  },
};

5、当分辨率改变的时候，列表的高度会缩小，如何在分辨率改变时，高度也随之自适应（不用 amfe-flexible ）

vue监听元素高度指令，单个页面进行应用

// directives 与 data 同级，可以百度资料
directives:{
    resize: { // 指令的名称
        bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
          console.log(el,"绑定",binding);
          let width = '', height = '';
          function isReize() {
            const style = document.defaultView.getComputedStyle(el);
            if (width !== style.width || height !== style.height) {
              binding.value({width:style.width,height:style.height});  // 关键(这传入的是函数,所以执行此函数)
            }
            width = style.width;
            height = style.height;
          }
          el.__vueSetInterval__ = setInterval(isReize, 300);
        },
        unbind(el) {
          console.log(el,"解绑");
          clearInterval(el.__vueSetInterval__);
        }
      }
 },

monResize(data){      
    let {width,height} = data;
    console.log("width:",width,"height:",height,"   dom尺寸方式改变");
},

多页面应用：
https://www.cnblogs.com/myqinyh/p/16443370.html

可能遇到的问题：

vue 安装postcss-pxtorem插件报错：[object Object] is not a PostCSS plugin。

参考链接：https://blog.csdn.net/weixin_36724538/article/details/117469617

报错：[object Object] is not a PostCSS plugin。
报错原因：postcss-pxtorem版本太高，更改版本为5.1.1
执行命令： npm install postcss-pxtorem@5.1.1
运行： npm run dev