可视化大屏适配方案

可视化大屏适配方案详解：rem、vw/vh、scale 及最佳实践

在开发大屏可视化项目时，适配方案的选择直接关系到展示效果与开发效率。本文将对主流的三种方案（rem / vw-vh / scale）进行优缺点分析，并介绍一种兼容性更强、体验更佳的混合适配实践方案。

---

三大主流适配方案对比

方案	原理简介	优点	缺点	推荐场景
rem	基于根节点字体大小变化，通过 rem 单位控制布局与字体大小	响应式强、布局灵活、适合组件化开发	配置复杂、字体易失真、不同屏幕下调试成本高	内容丰富的页面
vw/vh	使用视口单位（1vw = 1%视口宽度）直接定义大小	使用简单、实时响应窗口变化、适合全屏布局	不易控制字体大小、滚动区域需手动处理、小屏可能溢出	单页全屏展示类大屏
scale	利用 transform: scale 对整个页面按比例缩放	实现简单、开发成本低、兼容性强	模糊变形严重、鼠标坐标失真、对交互项目不友好	快速交付的展示项目

---

但是在实际开发中，都会存在很多问题，例如出现字体模糊、第三方插件样式不适配、非全屏模式下无法实现1080px高度，导致无法还原设计稿等问题，这里介绍另外一种适配方案

实现过程

1. 安装 postcss-pxtorem

pnpm i postcss-pxtorem postcss -D

2. 配置 postcss.config.js

在项目根目录创建 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

import "./utils/flexible"; // 引入适配脚本

flexible.js代码如下

export 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;
};

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

updateRootFontSize();

window.addEventListener("resize", updateRootFontSize);

✅ 大功告成！😊