Vue中rem适配多分辨率大屏可视化屏幕

 思路：

1. 以1920*1080设计稿为例，实现适配最本质的是要计算实际设计稿映射到不同分辨率屏幕上的比例系数，以及何时用宽度去适配，何时用高度去适配。
2. 如2k屏2560*1440以宽去适配设计稿时所得到的实际高度为(2560/1920)*1080=1440(近似)，这样就说明以设计稿映射到2k屏是没有问题的。
3. 但是注意最重要的一点，上面映射的基础都是屏幕以100%缩放，但笔记本一般默认都是会有缩放的，所以笔记本上实际的2k屏所获取的浏览器视口宽度并不等于2k分辨率，所以映射的高度在缩放状态下是无法达到1440的，就会出现下部空白的情况。这时候就要考虑试着用高度去适配，这个是没有准确答案的，需要根据实际屏幕情况去选中则使用高还是宽的比例系数去适配，我自己所做的项目大于设计稿宽度的直接使用高度去适配是没问题的。

 mounted() {
    this.$nextTick(() => {
      this.setRem();
    });
    window.addEventListener("resize", this.setRem);
  },
  methods: {
    setRem() {
      // 在标准 375px 适配下，100px = 1rem;
      var baseFontSize = 100; //转换的尺寸

      //设计师的尺寸
      var baseWidth = 1920;
      var baseHeight = 1080;

      //浏览器缩放比例
      var t = window.devicePixelRatio || 1;

      //获取当前视口宽高 （*t实际作用为解决笔记本缩放问题，获取的实际为当前设备的实际像素）

      const clientWidth =
        (document.documentElement.clientWidth || window.innerWidth) * t;
      const clientHeight =
        (document.documentElement.clientHeight || window.innerHeight) * t;
      if (!clientWidth || !clientHeight) return;

      //比较宽高 以更小的比例为准去适配
      var rem = 100;

      if (clientWidth <= baseWidth) {
        rem = (clientWidth / 1920) * baseFontSize;
      } else {
        rem = (clientHeight / 1080) * baseFontSize;
      }
      document.querySelector("html").style.fontSize = rem + "px";

    
   //解决缩放问题
      this.$nextTick(() => {
        let c = document.querySelector("body");
        c.style.zoom = 1 / t;
      });
    },