前端大屏scale适配

背景需求：前端大屏适配
说明：项目大屏，使用scale适配是最快且有效的（等比缩放）。
效果：

补充： 等比缩放时，项目的上下或者左右是肯定会有留白的，这个不管是rem，还是scale都会出现的问题，除非你不是等比缩放。才不会有留白。

如何处理留白： 建议留白的部分用大屏相近的背景图去覆盖就好了。

如何让项目不留白： 各个分辨率下都不留白，那你的项目只能是非等比缩放。建议使用rem+其他的响应式方法(比如媒体查询，百分比布局，flex，vh/vw单位)

scale使用步骤：
html部分：

<div className="screen-wrapper">
    <div className="screen" id="screen">

    </div>
 </div>

js部分：

<script>
export default {
mounted() {
  // 初始化自适应  ----在刚显示的时候就开始适配一次
  handleScreenAuto();
  // 绑定自适应函数   ---防止浏览器栏变化后不再适配
  window.onresize = () => handleScreenAuto();
},
deleted() {
  window.onresize = null;
},
methods: {
  // 数据大屏自适应函数
  handleScreenAuto() {
    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',
    ).style.transform = `scale(${scale}) translate(-50%, -50%)`;
  },
},
};
</script>

css部分：

/*
  除了设计稿的宽高是根据您自己的设计稿决定以外，其他复制粘贴就完事
*/  
.screen-root {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;  //设计稿的宽度
        height: 960px;  //设计稿的高度
        transform-origin: 0 0;
        position: absolute;
        left: 50%;
        top: 50%;
    }
}

如果你不想分别写html，js和css，那么你也可以使用v-scale-screen插件来帮你完成
使用插件参考：https://juejin.cn/post/7075253747567296548
参考文章：https://juejin.cn/post/7163932925955112996#heading-11

本文的项目源码地址：https://github.com/rui-rui-an/scale