HTML页面自适应

1
<template>
2
  <div id="app">
3
    <router-view/>
4
  </div>
5
</template>
6

7
<script>
8
export default {
9
  name: 'App',
10
  mounted(){
11
    this.realizeFN()
12
  },
13
  methods:{
14
    realizeFN() {
15
      setTimeout(() => {
16
        window.onresize();
17
      }, 40);
18
      window.onresize = function temp() {
19
        let width = document.body.clientWidth;
20
        let height = document.body.clientHeight;
21
        if (width < 1000) {
22
          return;
23
        }
24
        let scaleVal = width / 1920;
25
        let mark=document.getElementById("login")
26
        if(mark){
27
          return
28
        }
29
        let contain = document.getElementById("app");
30
        if (contain.style) {
31
          contain.style.marginBottom = -(1080 * (1 - scaleVal)) + "px";
32
          contain.style.height=(height/scaleVal-65)+'px'
33
          contain.style.transform = `scale(${scaleVal})`;
34
        }
35
      };
36
    },
37
  },
38
  created(){
39
  }
40
}
41
</script>
42

43
<style lang="scss">
44
#app {
45
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
46
  -webkit-font-smoothing: antialiased;
47
  -moz-osx-font-smoothing: grayscale;
48
  color: #2c3e50;
49
  width: 100%;
50
  height: 100%;
51
  transform-origin: 0 0;
52
}
53
::-webkit-scrollbar
54
{
55
    width: 3px;
56
    height: 5px;
57
    // display: none
58
}
59

60
/*定义滚动条轨道 内阴影+圆角*/
61
::-webkit-scrollbar-track
62
{
63
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
64
    border-radius: 10px;
65
}
66

67
/*定义滑块 内阴影+圆角*/
68
::-webkit-scrollbar-thumb
69
{
70
    border-radius: 10px;
71
    -webkit-box-shadow: inset 0 0 6px #15B2CC;
72
    //background-color: #15B2CC;
73
}
74
</style>