前言：不同分辨率的大屏適配這個是每個前端都會遇見的問題，以前也嘗試過多種方案，今天就來分享一下我嘗試過的方案跟我比較推薦的方案。

一、常見的大屏適配方案

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 + 動態根字體更合適