如何实现大屏在各种分辨率下正常显示?

我的方法是通过设置css的transform的scale属性,动态的通过对比设计稿获取合适比例,即比值小的那个,完成缩放,有点类似于background-size的contain属性实现

实现的代码

// .js
export function setScale() {
  let designWidth = 5760; //设计稿的宽度，根据实际项目调整
  let designHeight = 1080; //设计稿的高度，根据实际项目调整

  let sw = document.documentElement.clientWidth / designWidth;
  let sh = document.documentElement.clientHeight / designHeight;
  let scale = Math.min(sw, sh);
  return scale
}

// .vue
<template>
  <div id="home"></div>
</template>
<script>
  import {setScale} from '@/utils/SetScale.js'
  import {onMounted} from 'vue'
  onMounted(() => {
    const dom = document.querySelector(#home)
    const scale = setScale()
    dom.style = `--scale: ${scale}`
  })
</script>
<style>
  #home {
    width: 5760px;  //设计稿的宽度，根据实际项目调整
    height: 1080px;  //设计稿的高度，根据实际项目调整
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: scale(var(--scale), var(--scale)) translate(-50%, -50%);
    transform-origin: 0 0;
    transition: scale 0.3s;
  }
</style>