一、前端大屏自适应解决方案

1、使用felx布局

要点： 使用flex各种布局，结合元素使用百分比

使用场景： H5页面、简单后台业务系统页面

2、使用rem单位

参考链接：用rem做响应式开发

二、前端大屏自适应最佳解决方案：transform:scale

大屏使用rem耗时，而且对浏览器最小字体不支持，使用transform:scale可以节省百分之九十工作量，为此我们基于vue直接开发了一个公共的组件，供大家使用！

1、创建一个组件SacleBox
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
  <div
    class="ScaleBox"
    ref="ScaleBox"
    :style="{
      width: width + 'px',
      height: height + 'px',
    }"
  >
    <slot></slot>
  </div>
</template>
 
<script>
export default {
  name: "ScaleBox",
  props: {},
  data() {
    return {
      scale: 0,
      width: 1920,
      height: 1080,
    };
  },
  mounted() {
    this.setScale();
    window.addEventListener("resize", this.debounce(this.setScale));
  },
  methods: {
    getScale() {
      // 固定好16：9的宽高比，计算出最合适的缩放比
      const { width, height } = this;
      const wh = window.innerHeight / height;
      const ww = window.innerWidth / width;
      console.log(ww < wh ? ww : wh);
      return ww < wh ? ww : wh;
    },
    setScale() {
      // 获取到缩放比例，设置它
      this.scale = this.getScale();
      if (this.$refs.ScaleBox) {
        this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
      }
    },
    debounce(fn, delay) {
      const delays = delay || 500;
      let timer;
      return function () {
        const th = this;
        const args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function () {
          timer = null;
          fn.apply(th, args);
        }, delays);
      };
    },
  },
};
</script>
 
<style lang="scss">
#ScaleBox {
  --scale: 1;
}
.ScaleBox {
  position: absolute;
  transform: scale(var(--scale)) translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  z-index: 999;
  // background: rgba(255, 0, 0, 0.3);
}
</style>
2、引用组件
1
2
3
4
5
6
7
8
9
10
export default {
  name: "bigScreen",
  components: {
    ScaleBox,
  },
  data() {
    return {
      // ----------------------------------------------------------------
    }
}
3、用ScaleBox组件包裹整个页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="bigScreen">
    <scale-box>
      <div class="main-wraper">
        <!--header-->
        <div class="header-wraper f-r-c-s"></div>
        <!--content-->
        <div class="body-wraper f-r-c-s"></div>
      </div>
    </scale-box>
  </div>
</template>
<script>
import ScaleBox from './components/ScaleBox/index.vue';
export default {
  name: 'BigScreen',
  components: {
    ScaleBox
  }
}
</script>
4、编写自己页面

注意：
（1）使用px做单位，不使用rem

（2）ScaleBox内部页面元素最大的盒子按照1920*1080为容器严格计算。所有宽高加起来为1920*1080

（3）最好不要使用百分比分配宽高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style lang="scss" scoped>
.bigScreen {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  font-size: 14px;
  background: #1e80ff;
  .main-wraper {
    user-select: none;
    width: 1920px;   // 注意这里的宽度的设置
    height: 1080px;  // 注意这里的高度的设置
    background: url('../../assets/bigScreen.jpg');
    background-size: cover;
    box-sizing: border-box;
    background-repeat: no-repeat;
  }
}
</style>

最后可以完成大屏自适应了，组件化之后也更好用，前期可以直接单独写页面，最后再加上ScaleBox即可，是非常方便快捷而高效的方法。