在日常前端開(kāi)發(fā)中，大屏項(xiàng)目是每個(gè)前端開(kāi)發(fā)者必備技能，但是目前設(shè)備尺寸大小和分辨率都不相同，所以大屏適配成了一個(gè)頭疼的問(wèn)題?？吹骄W(wǎng)上的實(shí)現(xiàn)方案有rem，flexible，zoom，百分比，總感覺(jué)沒(méi)那么完美，于是自己研究了一下也借鑒了網(wǎng)上大神的方法，實(shí)現(xiàn)了一下這三種大屏適配方案，在實(shí)際開(kāi)發(fā)中可以借鑒使用

第一種：使用css屬性scale縮放來(lái)適配（簡(jiǎn)單，易上手）

gitee地址：大屏可視化模板: 大屏可視化模板。利用scale來(lái)分辨率適配

?我把關(guān)鍵代碼封裝成了組件，使用的時(shí)候直接套在大屏頁(yè)面就可以實(shí)現(xiàn)

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

<script setup>
import { ref, onMounted, defineProps } from 'vue'
const width = ref(null), //設(shè)計(jì)寬度
  height = ref(null), //設(shè)計(jì)高度
  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地址：大屏可視化模板固定尺寸: 大屏可視化模板固定尺寸

關(guān)鍵代碼：

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地址：大屏可視化自動(dòng)拉伸模板: 大屏可視化自動(dòng)拉升模板

?關(guān)鍵代碼：

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

// * 設(shè)計(jì)稿尺寸（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;
  // 當(dāng)前寬高比
  const browserRoom = getZoom();
  // 當(dāng)前寬高比
  /**
   * 1. 先將寬高乘上瀏覽器縮放倍數(shù)x
   * 2. 再將整個(gè)頁(yè)面用scale縮放 1/x 倍
   * 在視覺(jué)上，就感覺(jué)頁(yè)面沒(méi)有縮放
   */
  // 寬高
  const w = window.innerWidth * browserRoom;
  const h = window.innerHeight * browserRoom;
  // scale縮放比例
  const scl = parseFloat((1 / browserRoom).toFixed(5));

  // 頁(yè)面重繪處理
  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>

以上就是我總結(jié)的大屏可視化屏幕適配方案，有好的想法可以和我交流，一起進(jìn)步?。。?span toymoban-style="hidden">文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-521149.html

到了這里，關(guān)于前端大屏可視化適配方案（通用模板，快速上手）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！