可视化大屏开发，知道这三个适配方案，效率翻倍！

哈喽，大家好 我是 xy👨🏻‍💻。今天和大家来聊一聊大屏可视化适配过程中的痛点以及怎么去解决这些痛点！！！

前言

开发过大屏可视化应用的前端工程师们通常会有这样的共识：

在可视化开发过程中，最具有挑战性的并非各种图表的配置与效果展示，而是如何确保大屏在不同尺寸的屏幕上都能实现良好的适配。

原始解决方案

起初比较流行的三大解决方式：

rem 方案

• 动态设置 HTML 根字体大小和 body 字体大小，配合百分比或者 vw/vh 实现容器宽高、字体大小、位移的动态调整

vw/vh 方案

• 将像素值（px）按比例换算为视口宽度（vw）和视口高度（vh），能够实时计算图表尺寸、字体大小等

scale 方案

• 根据宽高比例进行动态缩放，代码简洁，几行代码即可解决，但是遇到一些地图或者 Canvas 中的点击事件，可能会存在错位问题，需要做针对性的调整适配

以上三种方式，都能够实现大屏的基本适配！

但是在开发过程中需要对每个字体和容器去做相应的计算调整，相对来说较为繁琐，而且在团队协作过程中也容易出现问题。

那么有没有一种方式，只需要简单的一些配置，就能完全搞定大屏在不同尺寸的屏幕上都能实现良好的适配？

以下给大家推荐三个方案，只需要简单的几行代码配置，可以完全解决大屏开发中的适配问题，让你效率翻倍！！！

autofit.js

autofit.js 基于比例缩放原理，通过动态调整容器的宽度和高度来实现全屏填充，避免元素的挤压或拉伸。

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

源码地址

Github 地址：https://github.com/995231030/autofit.js

v-scale-screen

大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应（会存在拉伸问题），如果是 React 开发者，可以使用 r-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>

源码地址

github 地址：https://github.com/Alfred-Skyblue/v-scale-screen

FitScreen

一种基于缩放的大屏自适应解决方案的基本方法，一切都是基于设计草图的像素尺寸，通过缩放进行适配，一切都变得如此简单。

支持 vue2、vue3 以及 react，可以适用于任何框架，只要一点点代码。

安装：

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>

源码地址

github 地址：https://github.com/jp-liu/fit-screen

最后，如果大家有更好的适配方案，欢迎在评论区留言一起学习交流！👏

最后

如果觉得本文对你有帮助，希望能够给我点赞支持一下哦 💪 也可以关注wx公众号：前端开发爱好者 回复加群，一起学习前端技能 公众号内包含很多实战精选资源教程，欢迎关注