大屏适配方案

前言：不同分辨率的大屏适配这个是每个前端都会遇见的问题，以前也尝试过多种方案，今天就来分享一下我尝试过的方案跟我比较推荐的方案。

一、常见的大屏适配方案

1. 固定宽高 + scale 整体缩放

核心思想：把设计稿当作“画布”，用 CSS transform: scale() 对整张画布缩放，保证视觉一致性。
原理：根据屏幕尺寸与设计稿尺寸比例计算缩放值（如 scale = min(w / designW, h / designH) 或分别计算 x/y），再应用到根容器。
适用场景：数据大屏、驾驶舱、监控屏。
优点：开发成本低、设计稿一致性强、布局稳定。
缺点：等比可能产生黑边，非等比可能产生形变。

2. 百分比 + vw/vh 响应式布局

核心思想：通过 CSS 的 vw/vh 或百分比让布局随屏幕比例伸缩。
原理：视口单位会随着屏幕变化自动调整，元素尺寸跟随变化。
优点：无需 JS 计算，纯 CSS 响应式。
缺点：复杂布局难精确对齐，设计一致性较弱。

3. Rem + 动态根字体

核心思想：计算根字体 html { font-size: ... }，所有尺寸使用 rem。
原理：改变根字体大小，使整体随屏幕缩放。
优点：对文字缩放友好，适合多文字页面。
缺点：对复杂图表和 Canvas 容器配合差，仍需额外处理。

4. 媒体查询 @media

核心思想：根据屏幕宽高区间定义不同样式。
原理：为多个分辨率编写不同布局策略。
优点：尺寸控制精细。
缺点：维护成本高，不适合多分辨率大屏。

5. 容器适配（flex/grid + breakpoints）

核心思想：使用现代布局系统（flex/grid），让内容在不同尺寸下自适应排列。
优点：结构灵活，适合业务后台类页面。
缺点：不保证设计稿像素级一致性，大屏视觉容易变形。

二、推荐方案：Scale 缩放

适用场景：偏“展示型”的大屏，以视觉一致性为优先目标。

实施要点：

• 设置设计稿宽高，一般为 1920 × 1080
• 计算缩放比例
• 把页面当作一个容器，用 transform: scale() 缩放
• 监听 resize，随时重新计算
• 非等比从左上角变换，等比居中变换

import React, { useEffect, useState, useRef } from 'react';

interface ScaleBoxProps {
  width?: number;
  height?: number;
  children: React.ReactNode;
}

const ScaleBox: React.FC<ScaleBoxProps> = ({
  width = 1920,
  height = 1080,
  children
}) => {
  const [scale, setScale] = useState({ x: 1, y: 1 });
  const boxRef = useRef<HTMLDivElement>(null);

  const getScale = () => {
    const x = window.innerWidth / width;
    const y = window.innerHeight / height;
    return { x, y };
  };

  useEffect(() => {
    const handleResize = () => {
      setScale(getScale());
    };
    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [width, height]);

  return (
    <div
      className="fixed inset-0 overflow-hidden bg-black"
      style={{
        background: '#0f1225',
      }}
    >
      <div
        ref={boxRef}
        style={{
          width,
          height,
          transform: `scale(${scale.x}, ${scale.y})`,
          transformOrigin: '0 0',
          position: 'absolute',
          left: 0,
          top: 0,
          transition: 'transform 0.3s ease',
        }}
        className="relative shadow-2xl overflow-hidden"
      >
        {children}
      </div>
    </div>
  );
};

export default ScaleBox;

三、等比与非等比的区别

非等比缩放：不保持设计稿宽高比，宽度缩放 = window.innerWidth / width，高度缩放 = window.innerHeight / height。
优点：能铺满全屏，不会出现黑边。
缺点：视口宽高比差异大时会形变，视觉体验下降。
如图：

等比缩放：保持设计稿宽高比，但可能会有黑边。实现上将缩放值改为单一数值，并居中变换：

const getScale = () => {
  const x = window.innerWidth / width;
  const y = window.innerHeight / height;
  return Math.min(x, y);
};
<div
  ref={boxRef}
  style={{
    width,
    height,
    transform: `translate(-50%, -50%) scale(${scale})`,
    transformOrigin: "center center",
    position: "absolute",
    left: "50%",
    top: "50%",
  }}
>
  {children}
</div>;

效果如图：

四、选择建议

• 追求铺满全屏、容忍形变：选择非等比缩放
• 追求视觉一致、可接受黑边：选择等比缩放
• 业务偏内容阅读、文字密集：Rem + 动态根字体更合适