# 前言
开发过 大屏可视化 应用的前端工程师们通常会有这样的共识：
在可视化开发过程中，最具有挑战性的并非 各种图表 的配置与 效果展示 ，而是如何确保 大屏 在 不同尺寸 的屏幕上都能实现良好的适配。
# 原始解决方案
起初比较流行的 三大 解决方式：
# 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
