Vue页面进入根据分辨率宽高比调整可视区域

本文介绍了一种使用Vue.js实现视图自适应的方法。通过监听窗口尺寸变化，并根据不同的屏幕宽度调整视图容器的高度和顶部边距，确保了在不同设备上都能获得良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、vue基础dom:

<template>
  <div class="visu-body">
    <div class="visu-container" id="visu-container">
    </div>
  </div>
</template>

2、在mouted中加载方法：

mounted() {
    const that = this
    that.$nextTick(() => {
      resizeContainer()
    })
  },

3、resizeContainer:

// 根据页面大小调整页面
const resizeContainer = function() {
  (function(doc, win) {
    const docEl = doc.documentElement
    const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    const recalc = function() {
      const clientWidth = docEl.clientWidth
      const clientHeight = docEl.clientHeight
      const visuContainer = document.getElementById('visu-container')
      // 整体内容的位置
      if (visuContainer) {
        const height = parseInt(clientWidth / defaultWHRate)
        const top = parseInt((clientHeight - height) / 2)
        if (clientHeight > height) {
          visuContainer.style.marginTop = top + itemUnit
          visuContainer.style.height = height + itemUnit
        } else {
          visuContainer.style.height = clientHeight + itemUnit
        }
      }
    }
    if (!doc.addEventListener) return
    recalc()
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
  })(document, window)
}