【不到20行代码】🔥这才是正确的可视化大屏适配方案！

背景

可视化大屏是每个前端工程师职业生涯中可能会遇到的一个挑战。初次接触时，我也曾感到迷茫，不知从何入手。在网上搜索了一番，发现有多种适配方案，例如使用 rem、vw/vh 以及 scale 等。然而，其中大部分方法无法做到真正的全屏适配，难以满足业务需求。

实际上，当你掌握了大屏适配的核心原理后，就会发现它并不复杂。

调研大屏的尺寸

不同公司的业务场景对大屏的尺寸要求不同，但主流行业，如互联网、证券金融等，通常采用的宽高比大于 16:9。

注：你可以根据自身业务特点，对接下来的代码方案进行适当调整。

宽高比	特点	典型分辨率	应用场景
16:9	主流比例，适配高清视频和设计工具	1920×1080、3840×2160	会议展示、数据监控中心
16:10	纵向空间更大，适合多行数据展示	1920×1200、2560×1600	商业汇报屏、高端会议室
4:3	传统比例，兼容老旧系统	1024×768、1600×1200	工业控制室、老旧监控系统
21:9	超宽视野，适合横向延展内容	2560×1080、3440×1440	交通调度中心、金融实时看板
32:9	极致宽度，可分割为多个虚拟屏幕	3840×1080、5120×1440	多任务监控（数据、视频、日志并行展示）
拼接屏	比例灵活，支持多屏组合	2×2（16:9）、3×3（方形）	指挥中心、展览馆、大型数据看板
定制比例	根据需求设计异形或特殊比例	3:1、1:1 等	超长信息流（如股票行情）、艺术装置交互屏

实现方案

适配思路

我们的方案基于 16:9 进行设计。

1. 当宽高比等于 16:9

此时，页面能够完美铺满屏幕。

2. 当宽高比小于 16:9

效果如下，可能有人会疑惑，为什么页面没有完全铺满？

正如前面提到的，国内市场上主流的大屏宽高比通常大于 16:9。因此，在宽高比小于 16:9 的情况下，我们只需要确保页面不会出现明显的错位即可。

如下图所示，页面底部会留出一些空白区域，但这并不影响整体的展示效果。

3. 当宽高比大于 16:9

此时，头部适配较为简单，而主体部分需要与产品和设计师讨论，决定哪些内容需要横向扩展，以达到最佳展示效果。

代码实现

1. 适配核心代码 - flexible.ts

我们需要判断当前屏幕的宽高比是否大于 16:9：

• 如果 大于 16:9，则计算 scaleRatio = 页面高度 / 1080
• 如果 小于 16:9，则计算 scaleRatio = 页面宽度 / 1920

计算 scaleRatio 的核心代码如下：

const enum BaseSize {
  WIDTH = 1920,
  HEIGHT = 1080,
  FONT_SIZE = 16,
}

const calculateScaleRatio = () => {
  const { clientWidth, clientHeight } = document.documentElement;
  
  return clientWidth / clientHeight > BaseSize.WIDTH / BaseSize.HEIGHT
    ? clientHeight / BaseSize.HEIGHT
    : clientWidth / BaseSize.WIDTH;
};

const scaleRatio = calculateScaleRatio();

接着，我们将 scaleRatio * 16 设置到 html 的 font-size，以适配 rem 计算。

“为什么要乘以 16？因为 HTML 的默认 font-size 是 16px，而 Tailwind CSS 也是基于 16px 计算 rem 的。”

document.documentElement.style.fontSize = `${scaleRatio * BaseSize.FONT_SIZE}px`;

另外，我们还可以在 html 上存储 data-scaleRatio，方便 Echarts 组件获取这个值来做适配。

document.documentElement.dataset.scaleRatio = scaleRatio.toString();

最终完整核心代码如下，不足 20 行 ！

enum BaseSize {
  WIDTH = 1920,
  HEIGHT = 1080,
  FONT_SIZE = 16,
}

const calculateScaleRatio = () => {
  const { clientWidth, clientHeight } = document.documentElement;
  return clientWidth / clientHeight > BaseSize.WIDTH / BaseSize.HEIGHT
    ? clientHeight / BaseSize.HEIGHT
    : clientWidth / BaseSize.WIDTH;
};

const scaleRatio = calculateScaleRatio();
document.documentElement.style.fontSize = `${scaleRatio * BaseSize.FONT_SIZE}px`;
document.documentElement.dataset.scaleRatio = scaleRatio.toString();

3. 安装插件进行单位转换

⚠️ 注意：是否安装以下插件可根据具体业务需求决定，并非必须。

1. 安装 tailwindcss 和 postcss-pxtorem

pnpm i tailwindcss@^3.4.17 postcss-pxtorem postcss -D

2. 配置 tailwind.config.ts 和 postcss.config.js

在项目根目录创建 tailwind.config.ts，并写入以下代码：

import type { Config } from "tailwindcss";

export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
} satisfies Config;

在项目根目录创建 postcss.config.ts，并写入以下代码：

export default {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    "postcss-pxtorem": {
      rootValue: 16,
      propList: ["*"],
      minPixelValue: 2,
    },
    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
  },
};

3. 在 main.ts 中引入 flexible.ts 和 tailwind.css

import "./styles/tailwind.css"; // 引入 TailwindCSS
import "./utils/flexible"; // 引入适配脚本

// 其它代码

4. 编写 HTML 页面结构

<template>
  <div class="bg-yellow-400 h-[400px]"></div>
  <div class="grid grid-cols-[1fr_3fr] h-[680px]">
    <div class="bg-blue-400"></div>
    <div class="bg-red-400"></div>
  </div>
</template>

在项目开发过程中，可以结合 flex、grid、vw/vh 等布局方式，并封装一个可适配的 ECharts 图表组件。这样，在实际编写可视化适配代码时，就能够更加得心应手！

总结

1. 了解屏幕比例：大多数可视化大屏的宽高比大于 16:9，不同应用场景有不同的适配需求。
2. 选择合适的适配方案：使用 scaleRatio 计算缩放比例，并根据屏幕尺寸调整 rem。
3. 兼容不同屏幕：当宽高比不同于 16:9 时，需要合理处理页面布局，避免错位影响展示效果。
4. 灵活扩展：可以结合 data-scaleRatio 适配 Echarts 图表，提升数据可视化的体验。

通过上述方案，我们可以确保可视化大屏在不同设备上的适配效果，实现高质量的数据展示。