前端大屏可视化适配方案（通用模板，快速上手）

在日常前端开发中，大屏项目是每个前端开发者必备技能，但是目前设备尺寸大小和分辨率都不相同，所以大屏适配成了一个头疼的问题。看到网上的实现方案有rem，flexible，zoom，百分比，总感觉没那么完美，于是自己研究了一下也借鉴了网上大神的方法，实现了一下这三种大屏适配方案，在实际开发中可以借鉴使用

第一种：使用css属性scale缩放来适配（简单，易上手）

gitee地址：大屏可视化模板: 大屏可视化模板。利用scale来分辨率适配

我把关键代码封装成了组件，使用的时候直接套在大屏页面就可以实现

<template>
   <div class="scale-box">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
const width = ref(null), //设计宽度
  height = ref(null), //设计高度
  scale = ref(null)

const props = defineProps({
  width: {
    type: String,
    default: '1920px',
  },
  height: {
    type: String,
    default: '1080px',
  },
})

const init = () => {
  setScale()
  window.addEventListener('resize', setScale)
}

const setScale = () => {
  let ww = window.innerWidth / props.width
  let wh = window.innerHeight / props.height
  scale.value = ww < wh ? ww : wh
}

init()
</script>

<style scoped>
.scale-box {
  width: v-bind('props.width');
  height: v-bind('props.height');
  transform: scale(v-bind(scale)) translate(-50%, -50%);
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  
}
</style>

第二种：固定缩放比

gitee地址：大屏可视化模板固定尺寸: 大屏可视化模板固定尺寸

关键代码：

export const fitScreen = () => {
  const body = document.documentElement
  const bodyWidth = body.clientWidth
  const bodyHeight = body.clientHeight
  const realRatio = bodyWidth / bodyHeight
  const designRatio = 16 / 9
  const scaleRate = realRatio > designRatio ? bodyHeight / 1080 : bodyWidth / 1920

  const app:any= document.querySelector('.bigScreen')

  app &&
    (app.style.transformOrigin = 'left top') &&
    (app.style.transform = `scale(${scaleRate}) translateX(-50%)`) &&
    (app.style.width = `${bodyWidth / scaleRate}px`)
}

第三种：缩放+铺满全屏+百分比

gitee地址：大屏可视化自动拉伸模板: 大屏可视化自动拉升模板

关键代码：

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
// * 默认缩放值
const scale = reactive({
  width: "1",
  height: "1",
});

// * 设计稿尺寸（px）
const baseWidth = 1920;
const baseHeight = 1080;

// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

let drawTiming = ref(null);
const appRef = ref();
const calcRate = () => {
  if (!appRef.value) return;
  // 当前宽高比
  const browserRoom = getZoom();
  // 当前宽高比
  /**
   * 1. 先将宽高乘上浏览器缩放倍数x
   * 2. 再将整个页面用scale缩放 1/x 倍
   * 在视觉上，就感觉页面没有缩放
   */
  // 宽高
  const w = window.innerWidth * browserRoom;
  const h = window.innerHeight * browserRoom;
  // scale缩放比例
  const scl = parseFloat((1 / browserRoom).toFixed(5));

  // 页面重绘处理
  appRef.value.style.width = `${w}px`;
  appRef.value.style.height = `${h}px`;
  appRef.value.style.transform = `scale(${scl}, ${scl}) translate(-50%, -50%)`;
};
const getZoom = () => {
  let ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  } else if (~ua.indexOf("msie")) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth;
  }
  if (ratio) {
    ratio = Math.round(ratio * 100);
  }
  return parseFloat(ratio / 100).toFixed(2);
};
// 窗口大小变化
const resize = () => {
  clearTimeout(drawTiming.value);
  drawTiming.value = setTimeout(() => {
    calcRate();
  }, 200);
};

onMounted(() => {
  calcRate();
  window.addEventListener("resize", resize);
});
onUnmounted(() => {
  window.removeEventListener("resize", resize);
});
</script>

以上就是我总结的大屏可视化屏幕适配方案，有好的想法可以和我交流，一起进步！！！