説起大屏可視化，就要了解大屏分辨率與尺寸的概念、實際應用場景、自適應適配方案等。

大屏分辨率與尺寸的異同

核心要點：

• 分辨率決定了圖像的精細程度，是數字概念
• 物理尺寸決定了屏幕大小，是物理概念
• 相同尺寸下，分辨率越高，圖像越清晰
• 相同分辨率下，尺寸越小，圖像越密集

• PPI = 分辨率 / 尺寸，是衡量清晰度的關鍵指標

  • PPI = √(水平像素² + 垂直像素²) / 對角線尺寸
  • PPI > 80: 適合近距離觀看 | PPI 30-80: 適合中距離觀看 | PPI < 30: 適合遠距離觀看

實際應用場景

常見顯示屏

一般是2K (1920×1080) 顯示屏，標準的16:9寬高比。但還有較寬21:9、較老4:3等寬高比的顯示屏。適用於日常辦公。

彙報顯示屏

一般是2K (1920×1080) 顯示屏 或 2K (2560×1440) 顯示屏，標準的16:9寬高比。適用於會議室彙報、房間展示屏、醫院叫號屏等。

指揮中心顯示屏

一般都是4K (3840×2160) 顯示屏，少有的8K (7680×4320) 顯示屏。指揮中心的顯示屏一般都是拼接屏，可以是超長屏，也可以是方屏，所以它的寬高比有32:9、21:9、16:9、4:3等。適用於企業指揮作戰實驗室、大數據中心、博物展覽館等需要大屏幕觀看的指揮中心。

自適應適配方案

大屏可視化自適應方案，一般都是從vw vh、rem、scale去考慮。

無論使用哪種自適應方案，我們都需要考慮以下幾點：

• 根據寬高比調整佈局結構
• 根據分辨率動態調整字體大小
• 考慮地圖等鼠標事件是否偏移
• 考慮圖表等矢量圖形動態的更新圖形和字體大小
• 考慮大圖片、視頻、模型等性能優化

一般來説做可視化大屏的時候都是定製化開發，但是有時候在其他寬高比不同 或 分辨率不同的顯示屏上進行演示報告，這時候就需要考慮自適應。

官方文檔
less
sass
查看具體功能的瀏覽器兼容性表/Can I Use

vw/vh 方案

基於視口百分比，適用純CSS解決方案，性能優秀，維護性中等。

• 優點：直接響應視口變化
• 缺點：計算複雜，字體可能過小

核心代碼：
1. Chrome 139 以上版本

:root {
    /* 設計稿基準尺寸（假設設計稿為1920×1080） */
    --design-width: 1920;
    --design-height: 1080;

    /* 計算vw/vh單位 */
    --vw-unit: calc(100vw / var(--design-width));
    --vh-unit: calc(100vh / var(--design-height));
}

/* vw適配函數 */
@function --vw(--px) {
    result: calc(var(--px) * var(--vw-unit));
}

@function --vh(--px) {
    result: calc(var(--px) * var(--vh-unit));
}

2. Less

/* 設計稿基準尺寸（假設設計稿為1920×1080） */
@design-width: 1920;
@design-height: 1080;

/* 計算vw/vh單位 */
@vw-unit: (1 / @design-width) * 100vw;
@vh-unit: (1 / @design-height) * 100vh;

/* vw適配混合函數 */
.vw(@px, @name:width) {
    @{name}: @px * @vw-unit;
}

.vh(@px, @name:height) {
    @{name}: @px * @vh-unit;
}

3. Sass

/* 設計稿基準尺寸（假設設計稿為1920×1080） */
$design-width: 1920;
$design-height: 1080;

/* 計算vw/vh單位 */
$vw-unit: 100vw / $design-width;
$vh-unit: 100vh / $design-height;

/* vw適配函數 */
@function vw($px) {
    @return $px * $vw-unit;
}

@function vh($px) {
    @return $px * $vh-unit;
}

注意事項

• 使用原生 CSS 時注意 Chrome 版本是否 139+
• 使用原生 CSS 和 Sass 時，直接vw、vh函數就行；但是使用 Less 時，要注意混合 .vw、.vh 入參有屬性名，此時也可以擴展更多的混合，如：.font-size(@px){ .vw(@@px, font-size) }
• Less 和 Sass 如果需要做全局引入配置
• 因為字體會隨着大屏的寬度變化而變化，也就是會説如果大屏超寬 或 超短，字體就會超大 或 超小，所以我們需要注意大屏寬高比與設計稿基準尺寸寬高比不能懸殊太大
• 注意滾動條會影響vw計算
• 如果寬高比極端情況、字體過小問題，需要做額外的處理

rem 方案

基於根字體大小，適用需要精確字體控制，性能良好，維護性良好。

• 優點：靈活控制字體大小
• 缺點：需要JS動態計算根字體大小

核心方案：

- 使用 `window.addEventListener('resize', resizeHandler)` 監聽，動態計算 font-size
- 媒體查詢 `@media`，根據屏幕的大小來控制  font-size
- 使用 CSS `if()`函數中的`媒體查詢（media()）`，控制根節點的 font-size，如：`:root {font-size: if(media(width >= 1200px): 16px; media(width >= 768px): 12px; else: 10px);}`

/* rem適配CSS */
:root {
/* 設計稿基準（1920×1080下1rem=16px） */
--design-rem-size: 16;
}

/* rem轉換函數 */
@function --rem(--px) {
    result: calc(var(--px) / var(--design-rem-size) * 1rem);
}

/* 使用Sass/Less時 轉為對應的語法格式 */

注意事項

• 如果是實際大屏寬高比與設計稿相同，動態更改根元素字體就能保證自適應方案；如果寬高比不同可能會出現元素溢出或留白的情況
• 注意移除舊監聽器，添加新監聽器

scale 方案

整體縮放，適用簡單適配需求，性能優秀，維護性簡單。

• 優點：簡單快速
• 缺點：像素模糊，交互問題

核心思想：

transform = `scale(${scale.scaleX}, ${scale.scaleY})`

注意事項

• 實際大屏寬高比與設計稿不同時，填充容器會拉伸，產生形變，此時地圖鼠標事件可能會便宜，需要單獨處理
• 實際大屏寬高比與設計稿不同時，等高或等寬比例適應容器，會產生留白

混合方案

多種組合，適用複雜大屏項目，性能中等，維護性複雜。

• 優點：取長補短
• 缺點：複雜度高

核心思想： 佈局用vw/vh，字體用rem，整體用scale限制

這裏使用 vw/vh + rem 結合瀏覽器新的特性 CSS 的 if()、@function、round()，來做個簡單的例子。

:root {
  --design-width: 1920;
  --design-height: 1080;
  --design-rem-size: 16;
  font-size: if(media(width>=3840px):32px; media(width>=2560px):24px; media(width>=1920px):16px; else:12px);
  /* 計算vw/vh單位 */
  --vw-unit: calc(100vw / var(--design-width));
  --vh-unit: calc(100vh / var(--design-height));
}

/* vw適配函數 用於容器 */
@function --vw(--px) {
  result: calc(var(--px) * var(--vw-unit));
}

@function --vh(--px) {
  result: calc(var(--px) * var(--vh-unit));
}

/* rem轉換函數 用於字體大小、padding */
@function --size(--px) {
  result: round(up, calc(var(--px) / var(--design-rem-size) * 1rem), 1px);
}

提示

• 主要是封裝 --vw、--vh 函數來完成佈局，包括容器的寬高、間距、容器陰影；封裝 --size 函數來控制字體大小、字體陰影。如果字體撐起容器border-radius 用 --size，否則用 --vw、--vh
• 這種方式需要制定大家需要遵守的規範
• 根字體大小也可以通過 js 動態改變，但要注意可能會造成閃屏等現象

1920x1080 vs 3840x2160

總結建議

選擇流程圖：

開始
  ↓
確定項目需求
  ├── 簡單展示項目 → scale方案
  ├── 數據可視化項目 → 混合方案(vw+rem)
  └── 複雜交互項目 → rem方案為主
  ↓
考慮目標設備
  ├── 固定大屏 → scale或vw
  ├── 多端適配 → rem或混合
  └── 移動端優先 → rem
  ↓
評估團隊技術
  ├── CSS熟練 → vw/vh方案
  ├── JS熟練 → rem或混合方案
  └── 全棧團隊 → 混合方案
  ↓
實施並監控