快捷導(dǎo)航

Vue中大屏適配和局部適配的方案總結(jié)

更新時(shí)間：2025年03月23日 14:19:34 作者：碼農(nóng)Davi

這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue.js的Mixins功能結(jié)合JavaScript實(shí)現(xiàn)頁(yè)面內(nèi)容的自適應(yīng)縮放,以適應(yīng)不同比例的屏幕,需要的小伙伴可以參考下

1.使用Mixins混入的方式解決自適應(yīng)適配功能

通用的 css3：scale 縮放方案，通過(guò) ref 指向頁(yè)面，屏幕改變時(shí)縮放內(nèi)容。項(xiàng)目的基準(zhǔn)尺寸是 1920px*1080px，所以支持同比例屏幕 100%填充，如果非同比例則會(huì)自動(dòng)計(jì)算比例居中填充，不足的部分則留白。

實(shí)現(xiàn)代碼 screenmixin.js

// * 默認(rèn)縮放值
const scale = {
  width: '1',
  height: '1',
};

// * 設(shè)計(jì)稿尺寸（px）
// const baseWidth = document.body.clientWidth;
// const baseHeight = document.body.clientHeight;
const baseWidth = 1920;
const baseHeight = 1080;

// * 需保持的比例（默認(rèn)1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

export default {
  data() {
    return {
      // * 定時(shí)函數(shù)
      drawTiming: null,
    };
  },
  mounted() {
    setTimeout(() => {
      this.calcRate();
    }, 200);
    window.addEventListener('resize', this.resize);
  },
  created() {},
  beforeDestroy() {
    window.removeEventListener('resize', this.resize);
  },
  methods: {
    calcRate() {
      const appRef = this.$refs['appRef'];
      if (!appRef) return;
      // 當(dāng)前寬高比
      const currentRate = parseFloat(
        (window.innerWidth / window.innerHeight).toFixed(5),
      );
      if (appRef) {
        if (currentRate > baseProportion) {
          // 表示更寬
          scale.width = (
            (window.innerHeight * baseProportion) /
            baseWidth
          ).toFixed(5);
          scale.height = (window.innerHeight / baseHeight).toFixed(5);
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
        } else {
          // 表示更高
          scale.height = (
            window.innerWidth /
            baseProportion /
            baseHeight
          ).toFixed(5);
          scale.width = (window.innerWidth / baseWidth).toFixed(5);
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
        }
      }
    },
    resize() {
      clearTimeout(this.drawTiming);
      this.drawTiming = setTimeout(() => {
        this.calcRate();
      }, 200);
    },
  },
};

頁(yè)面使用

<template>
  <div ref="appRef" class="wrapper">
    <div class="home-canvas">
   		內(nèi)容
    </div>
  </div>
</template>

<script>
import screenMinxi from '@/utils/screenmixin';
export default {
  mixins: [screenMinxi],
};
</script>

<style lang="scss" scoped>
// 必需寫寬高,如有單位轉(zhuǎn)換在style中寫
.wrapper{
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top; /* 縮放基點(diǎn)為左上角 */
  overflow: hidden;
}
</style>

2.局部適配方案 mixins.js

export const scaleMixin = {
  methods: {
    // 計(jì)算縮放比例
    getScaleRatio() {
      const baseWidth = 1920; // 基準(zhǔn)寬度
      const baseHeight = 1080; // 基準(zhǔn)高度
      const screenWidth = window.innerWidth; // 屏幕寬度
      const screenHeight = window.innerHeight; // 屏幕高度
      const ratioX = screenWidth / baseWidth;
      const ratioY = screenHeight / baseHeight;
      return Math.min(ratioX, ratioY); // 取最小比例作為縮放比例
    },
  },
  mounted() {
    // 監(jiān)聽窗口變化，重新計(jì)算縮放比例
    window.addEventListener('resize', () => {
      const scaleRatio = this.getScaleRatio();
      this.$refs.wrapper.style.transform = `scale(${scaleRatio})`;
    });
    // 初始化縮放比例
    const scaleRatio = this.getScaleRatio();
    this.$refs.wrapper.style.transform = `scale(${scaleRatio})`;
  },
};

引入使用

import { scaleMixin } from './mixins';
mixins: [scaleMixin],

 <div class="canvas-wrapper wrapper" style="width:1600px;heibht:890px;" ref="wrapper" >
      <div class="">內(nèi)容</div>
 </div>

樣式style

.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform-origin: left top; /* 縮放基點(diǎn)為左上角 */
  transform: scale(1); /* 初始化縮放比例 */
}

到此這篇關(guān)于Vue中大屏適配和局部適配的方案總結(jié)的文章就介紹到這了,更多相關(guān)Vue大屏適配和局部適配內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: