使用scale方式进行屏幕缩放实现适配大屏。无需特定编写rem，也不用考虑单位不一致导致的适配无效（%px随便用）。

原理：当我屏幕大小与设计稿大小不符的时候，计算缩放的比例，从而设置盒子的scale属性。

实例：Vue2用户可直接复制代码看看。react或angular用户参考示例琢磨一下

以上3种方案在实际应用中该怎么选择视具体情况而定，也有看到大家说自适应在地图的适配中会有一些兼容问题，我这边还没有实践过。

如果想简单，客户能同意留白，选用scale即可

如果需要兼容不同比例的大屏，并且想在不同比例中都有比较好的效果，图表占满屏幕，类似于移动端的响应式，可以采用vm vh的方案

至于rem，个人觉得就是scale和vm vh的综合，最终的效果跟scale差不多

接下来介绍下三种方案的具体实现，方案中的代码都以vue2.0和vue-cli3搭建的vue项目为例，因为是demo，图表的一些细节就没有过多细致的调整了

<template>
  <div>
    <div
         id="screen">
      <div>
        <div>
          侧边栏
        </div>
        <div>
          <header>这是头部</header>
          <section style="height: 500px;">这是身体</section>
          <footer>这是脚</footer>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  mounted () {
    this.handlerScale()
    window.onresize = () => this.handlerScale();
  },
  methods: {
    handlerScale () {
      let designWidth = 1920;   //设计图的宽度
      let designHeight = 620;   //设计图的高度
      const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designWidth / designHeight
        ? (document.documentElement.clientWidth / designWidth)
        : (document.documentElement.clientHeight / designHeight)
      document.getElementById('screen').style.transform = `scale(${scale}) translate(-50%)`
    }
  },
  destroyed () {
    window.onresize = null;
  },
}
</script>
 
<style  scoped>
.box {
  width: 100%;
  height: 100%;
}
.box .screen {
  width: 1920px;
  height: 100px;
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
}
.box .contain-box {
  display: flex;
}
.box .contain-box div:first-of-type {
  width: 200px;
  background-color: purple;
}
.box .contain-box div:last-of-type {
  flex: 1;
}
header {
  width: 100%;
  background-color: pink;
}
section {
  width: 100%;
  background-color: greenyellow;
}
footer {
  width: 100%;
  background-color: red;
}
</style>