VUE3如何使得大屏自适应的几种方法?

原创

已于 2024-01-16 17:32:05 修改 · 1.6w 阅读

收录于

当前文章被以下社区和专栏收录：

于 2023-10-11 17:05:36 首次发布

本文介绍了VUE3学习大屏自适应的几种方法，包括自适屏幕保持比例、使用CSS scale属性处理大屏幕自适应，以及使用rem的方法，如下载插件转换单位、新建等比适配文件、引入适配文件和配置插件等。

VUE3学习大屏自适应的几种方法

1.自适屏幕，始终保持`16:9`的比例（第一种方法）

<!-- 大屏固定比例16：9自适应   -->
<template>
    <div class="container">
      <div class="content" :style="getAspectRatioStyle">
        <!-- 数据展示内容 -->
      </div>
    </div>
  </template>
   
  <script setup lang="ts">
  import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
      const contentWidth = ref(0);
      const contentHeight = ref(0);
   
      const calculateAspectRatio = () => {
        const container = document.querySelector('.container');
        // const containerWidth = container.offsetWidth;
        const containerWidth: number = (<HTMLElement>container).offsetWidth;
        // const containerHeight = container.offsetHeight;
        const containerHeight: number = (<HTMLElement>container).offsetHeight;
   
        const aspectRatio = 16 / 9; // 16:9 比例
        const containerAspectRa

标签