16：9大屏适配

vue版 大屏16：9大屏适配方法

html
 <div class="screen-root">
    <div class="screen" id="screen">
    </div>
  </div>
  
  js======
  mounted () {
            // 初始化自适应  ----`在刚显示的时候就开始适配一次`
            this.handleScreenAuto()
            // 绑定自适应函数   ---防止浏览器栏变化后不再适配
            window.onresize = () => this.handleScreenAuto()
        },
        deleted () {
            window.onresize = `null`
        },

        methods: {
            // 数据大屏自适应函数
            handleScreenAuto () {
                const designDraftWidth = 1920 // 设计稿的宽度
                const designDraftHeight = 1080 // 设计稿的高度
                // 根据屏幕的变化适配的比例
                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%)`
                return 1
            }
        }
        
        css======
        .screen-root {
          height: 100vh;
          width: 100vw;
          background: #000a18;
          overflow: hidden;
          .screen {
            width: 1920px; //设计稿的宽度
            height: 1080px; //设计稿的高度
          }
        }