最开始比较流行的三大解决方式：
rem 方案
-
动态设置
HTML根字体大小和body字体大小，配合百分比或者vw/vh实现容器宽高、字体大小、位移的动态调整
vw/vh 方案
-
将
像素值（px）按比例换算为视口宽度（vw）和视口高度（vh），能够实时计算图表尺寸、字体大小等
scale 方案
-
根据
宽高比例进行动态缩放，代码简洁，几行代码即可解决，但是遇到一些地图或者Canvas中的点击事件，可能会存在错位问题，需要做针对性的调整适配
以上三种方式，都能够实现大屏的基本适配！但比较繁琐
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（可选）：延迟，默认是 0Github 地址：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