可视化大屏开发，三个适配方案

原始解决方案

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

rem 方案

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

vw/vh 方案

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

scale 方案

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

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

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

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

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

autofit.js

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

autofit.js 提供了一种简单而有效的方法来实现网页的自适应设计，尤其适合需要在不同分辨率和屏幕尺寸下保持布局一致性的应用场景。

安装autofit.js

npm install autofit.js --save

配置和使用

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

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

安装 v-scale-screen

npm install v-scale-screen --save

配置和使用

<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>

https://npmmirror.com/package/v-scale-screen v-scale-screen npm 镜像地址!

FitScreen

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

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

安装@fit-screen/vue

npm install @fit-screen/vue --save

配置和使用

<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>

https://npmmirror.com/package/@fit-screen/vue@fit-screen/vue npm 镜像地址!

本文内容转自以下链接~