大屏适配

## ** 前言**

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

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

## **原始解决方案**

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

##### **rem 方案**

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

##### **vw/vh 方案**

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

##### **scale 方案**

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

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

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

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

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

## **autofit.js**

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

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

![图片](http://banmag.cn:8089/i/2024/06/28/667e4e7286c8f.webp)

##### **安装：**

```bash
npm i autofit.js
```

##### **配置：**

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

![图片](http://banmag.cn:8089/i/2024/06/28/667e4e73dbe23.webp)

##### **安装：**

```bash
npm install v-scale-screen
# or
yarn add v-scale-screen
```

##### **配置：**

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

export default defineComponent({
  name: 'Test',
  components: {
    VScaleScreen
  }
})
</script>
```

##### **源码地址**

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

## **FitScreen**

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

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

![图片](http://banmag.cn:8089/i/2024/06/28/667e4e775b4e7.webp)

##### **安装：**

```bash
npm install @fit-screen/vue
# or
yarn add @fit-screen/vue
# or
pnpm install @fit-screen/vue
```

##### **配置：**

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

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

> 原文地址 https://mp.weixin.qq.com/s/CnJN4bbew2dP42aFJ_drrQ