大屏展示一般不需要滚动页面， 不方便领导直观查看， 所以我们会尽可能在一个屏幕展示需要展示的内容，通常通过设置宽度和高度为100vw和100vh，来设计让页面占满屏幕， 比如1920*1080的设计稿， 算出1px是多少vw或者vh然后计算对应的盒子， 计算起来非常麻烦， 不建议使用

大屏自适应解决方案-scale

通过transfrom: scale 来缩放页面， 可以是等比例缩放也可以占满全屏缩放， 也可以只宽度缩放， 或者只宽度缩放，我们经常会用等比例缩放， 来保证页面元素的不变形，但是这个也需要屏幕的大小相差无几， 比例大体一样， 要不然两边就会留白

此工具就是利用transfrom：scale来缩放页面已达到自适应

安装

npm install wh-screen-scale --dev

使用

通常是在项目app.vue中引入
import WHScreenScale from 'wh-screen-scale'
  ...
  data() {
    return {
      // 定义缩放对象
      whScreenScale: null
    }
  },
  mounted() {
    // 初始化
    this.whScreenScale = new WHScreenScale({container: 'app'}, (scale) => {
      console.log(scale);
    })
  },
  beforeDestroy() {
    // 移除监听
    this.whScreenScale.clearListener()
  }
  ...

参数说明

初始化方法里面包括两个参数， 第一个是配置options，第二个是回调函数（会返回缩放的scale）， options配置 | 名称 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- | | container|string| 否 | 缩放的外层容器一般是app.vue中router-view的外层容器id值， 默认'app' | | time|number| 否 | 页面缩放后盒子修改的时间，单位ms 默认为500 防抖动时间 | | width|number| 否 | 设计图宽度单位px，默认1920 | | height|number| 否 | 设计图高度单位px，默认1080 | | type|number| 否 | 缩放的类型，1 等比缩放，2 宽度缩放，3 高度缩放，4 宽高各自缩放 | | align|string| 否 | 缩放后盒子的位置，默认'center', 居中显示， 其他字符串上面留白为空 |

注意事项

container 元素默认样式会被修改成overflow：hidden; position: absolute;

由于缩放页面导致使用百度地图的时候可能某些功能异常，需要对应的地图盒子进行相反的比例缩放比如外层的页面scale是0.5 地图就得缩放比例就得是2