Vue大画面表示適応方法

この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとおりです。

1. utilsフォルダに次のコードでcvファイルを作成します。

エクスポート関数 useIndex(appRef) {
  // * appRefは最も外側のコンテナを指します // * タイミング関数let timer = null
  // * デフォルトのスケーリング値 const scale = {
    幅: '1'、
    高さ: '1'
  }
  // * デザインドラフトサイズ (px)
  定数ベース幅 = 1920
  定数ベース高さ = 1080

  // * 維持する比率（デフォルトは2）
  // 定数 baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
  定数基底比率 = 2
  定数calcRate = () => {
    // 現在のアスペクト比 const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
    （アプリ参照）の場合{
      現在のレートが基本比率より大きい場合
        // より広いことを示します scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
        スケール.高さ = (window.innerHeight / baseHeight).toFixed(5)
        appRef.style.transform = `スケール(${scale.width}, ${scale.height}) 変換(-50%, -50%)`
      } それ以外 {
        // より高いスケールを示します。height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
        スケール幅 = (window.innerWidth / baseWidth).toFixed(5)
        appRef.style.transform = `スケール(${scale.width}, ${scale.height}) 変換(-50%, -50%)`
      }
    }
  }

  定数リサイズ = () => {
    タイムアウトをクリア(タイマー)
    タイマー = setTimeout(() => {
      計算レート()
    }, 200)
  }

  // ウィンドウのサイズを変更して再描画する const windowDraw = () => {
    window.addEventListener('resize', resize)
  }

  戻る {
    アプリ参照、
    計算レート、
    ウィンドウ描画
  }
}

2.app.vue構造スタイル

<テンプレート>
  <div ref="appRef" クラス="main">
    <div class="レイアウトコンテナ">
    </div>
  </div>
</テンプレート>

<スクリプト>
'@/utils/utilsDram.js' から { useIndex } をインポートします。
エクスポートデフォルト{
  マウントされた（）{
    const { calcRate, windowDraw } = useIndex(this.$refs.appRef)
    計算レート()
    ウィンドウ描画()
  }
}
</スクリプト>
<style lang="scss" スコープ>
。主要 {
  色: #d3d6dd;
  幅: 1920ピクセル;
  高さ: 1080ピクセル;
  位置: 絶対;
  上位: 50%;
  左: 50%;
  変換: translate(-50%, -50%);
  変換の原点: 左上;

  .レイアウトコンテナ{
    幅: 100%;
    高さ: 100%;
    }
   }
</スタイル>

3. フォントサイズとボックスの幅は px に直接設定されます。ズームインまたはズームアウトしても、以前と同じままです。基本的なページサイズはあまり変わりません。次の図は、500 倍にズームインした場合の効果を示しています。