前端可视化大屏适配各方案分析处理

安腾斯科技

已于 2024-09-09 09:43:53 修改

阅读量371

点赞数 5

文章标签：前端大屏端

于 2024-09-09 09:40:54 首次发布

本文链接：https://blog.csdn.net/2301_81431930/article/details/142048430

版权

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

原始解决方案

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>