项目场景：

提示：这里简述项目相关背景：
开发某基金官网，适配问题

问题描述

1.设计图是1920px，不同分辨率需要适配。一开始使用的是postcss-px-to-viewport插件，但是在手机模式下，样式破了。随后解决别的网站，通过给body或者根元素设置zoom属性，可以使得整体页面缩放

<div id="app" class="mo-zoom"></div>
@media screen and (max-width: 1400px){
  .mo-zoom {
    zoom: .8;
  }
}
@media screen and (max-width: 1200px){
  .mo-zoom {
    zoom: .7;
  }
}
@media screen and (max-width: 1000px){
  .mo-zoom {
    zoom: .6;
  }
}
@media screen and (max-width: 900px){
  .mo-zoom {
    zoom: .5;
  }
}
@media screen and (max-width: 700px){
  .mo-zoom {
    zoom: .25;
  }
}

2.页面是通过zoom缩放来实现不同大小屏幕的兼容，后来发现缩放之后，echarts的鼠标移入时发生偏移。通过监听分辨率变化，获取zoom的属性值，先使echarts容器恢复正常，通过transform进行缩放

<div  id="trendEchart"  :style="`width: 1300px;height:400px;zoom:${zoom};transform:scale(${1/zoom});transform-origin:0 0`"></div>
let bodyzoom = getComputedStyle(document.getElementsByClassName('mo-zoom')[0],null).zoom;
    this.zoom = 1 / bodyzoom
    window.addEventListener("resize", () => {
      bodyzoom = getComputedStyle(document.getElementsByClassName('mo-zoom')[0],null).zoom;
      this.zoom = 1 / bodyzoom
    })