在可视化开发中，确保大屏在不同尺寸的屏幕上都能实现良好的适配是一项重要任务。

原始解决方案

1. REM 方案

• 核心思想：动态调整 HTML 根字体大小和 body 字体大小，结合百分比或vw/vh单位，实现容器宽高、字体大小、位移的动态适配。
• 优点：基于比例缩放，能够灵活适应不同分辨率和屏幕尺寸。
• 缺点：需要额外的计算和处理，可能增加开发复杂度。
  

2. VW/VH 方案

• 核心思想：通过将像素值（px）转换为视口宽度（vw）和视口高度（vh）来适配不同尺寸的屏幕，实时计算图表尺寸、字体大小等。
• 优点：实时自适应不同屏幕大小，适合全屏应用。
• 缺点：在极端分辨率下可能出现不可预期的布局问题。
  

3. Scale 方案

• 核心思想：根据屏幕宽高比例动态缩放，代码简洁，几行代码即可实现适配。
• 优点：实现简单，特别适合基本的大屏展示场景。
• 缺点：在地图、Canvas 等带有交互的组件中，可能会出现点击事件错位问题，需针对性调整。
  

autofit.js

核心思想：基于比例缩放原理，通过动态调整容器的宽度和高度实现自适应，避免元素的挤压或拉伸。

安装：

npm i autofit.js

配置：

import autofit from 'autofit.js';
onMounted(() => {
    autofit.init({
        el: '#page',
        dw: 375,
        dh: 667
    })
})
   * - 传入对象，对象中的属性如下：
   * - el（可选）：渲染的元素，默认是 "body"
   * - dw（可选）：设计稿的宽度，默认是 1920
   * - dh（可选）：设计稿的高度，默认是 1080
   * - resize（可选）：是否监听resize事件，默认是 true
   * - ignore(可选)：忽略缩放的元素（该元素将反向缩放），参数见readme.md
   * - transition（可选）：过渡时间，默认是 0
   * - delay（可选）：延迟，默认是 0

优点：适用于需要在不同分辨率和屏幕尺寸下保持布局一致性的应用场景。

v-scale-screen

核心思想：大屏自适应容器组件，支持宽度自适应、高度自适应、宽高等比例自适应以及全屏自适应。
安装：

npm install v-scale-screen
# or
yarn add v-scale-screen

配置：

<template>
  <v-scale-screen width="1920" height="1080">
    <div>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
    </div>
  </v-scale-screen>
</template>

<script>
import { defineComponent } from 'vue'
import VScaleScreen from 'v-scale-screen'

export default defineComponent({
  name: 'Test',
  components: {
    VScaleScreen
  }
})
</script>

FitScreen

核心思想：基于缩放的解决方案，一切适配都基于设计稿的像素尺寸，通过缩放进行处理。
安装：

npm install @fit-screen/vue
# or
yarn add @fit-screen/vue
# or
pnpm install @fit-screen/vue

配置：

<script setup>
import FitScreen from '@fit-screen/vue'
</script>

<template>
  <FitScreen :width="1920" :height="1080" mode="fit">
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo">
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
      </a>
    </div>
    <HelloWorld msg="Vite + Vue" />
  </FitScreen>
</template>

总结

根据项目的具体需求和复杂度选择合适的方案。对于较为简单的展示需求，Scale 和 FitScreen 方案足够应对；而对于交互复杂的大屏项目，可以考虑使用 rem 或 vw/vh 等方案进行细致调整。同时，结合实际项目场景，灵活运用这些工具和库，确保在各种屏幕尺寸下的大屏适配效果。