大屏自适应

web前端

js 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
mounted(){
  //初始化自适应  ----在刚显示的时候就开始适配一次
  handleScreenAuto();
  //绑定自适应函数   ---防止浏览器栏变化后不再适配
  window.onresize = () => handleScreenAuto();
},
deleted(){
  window.onresize = null;
},
methods: {
  //数据大屏自适应函数
  const handleScreenAuto = (): void => {
    const designDraftWidth = 1920;//设计稿的宽度
    const designDraftHeight = 960;//设计稿的高度
    //根据屏幕的变化适配的比例
    const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
      (document.documentElement.clientWidth / designDraftWidth) :
      (document.documentElement.clientHeight / designDraftHeight);
    //缩放比例
    (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
  }
}

HTML部分

1
2
3
4
5
6
7
<template>
  <div class="screen-wrapper">
    <div class="screen" id="screen">
    </div>
  </div>
</template>

Css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style lang="less">
  .screen-root {
    height: 100%;
    width: 100%;
    .screen {
      display: inline-block;
      width: 1920px;  //设计稿的宽度
      height: 960px;  //设计稿的高度
      transform-origin: 0 0;
      position: absolute;
      left: 50%;
    }
  }
<style>