大屏自适应方案总结

核心目标：让大屏在不同分辨率（1366×768 → 2560×1440 → 4K）下都能真实重排，图表清晰、字体不糊、关键信息不被裁切。

---

一、方案对比：为什么不用 transform: scale()

业界大屏常见两类方案，本项目选择第二类：

维度	scale 缩放方案	流式布局方案（本项目）
实现思路	固定按 1920×1080 画好，整体 transform: scale(min(sw, sh))	用 vw / vh / fr / flex 让元素真的跟着视口重排
字体清晰度	缩放后模糊/失真，尤其在 4K 屏	始终清晰，字体走系统级渲染
图表渲染	Canvas 被一起缩放，DPR 失真	ECharts 真实 resize，每次按容器尺寸重绘
跨分辨率	极端比例下大量留白或裁切	弹性适配，列宽/字号都能跟随
设计稿	严格还原 1920×1080	需要按弹性思维出图
复杂度	一行 transform 解决	CSS 节点更多，需理解 flex/grid
适合场景	展厅、固定大屏机柜	PC 后台、自适应数据看板（本项目）

一句话：scale 是「假响应式」——贴一张缩放过的图；流式是「真响应式」——每个元素真的变大变小。

---

二、三层架构

整个自适应链路分三层，从外到内：

浏览器视口
    ↓ (1) 视口单位撑满
ScreenLayout（vw/vh + flex）
    ↓ (2) Grid 等比分配
.grid（grid-template + fr）
    ↓ (3) 容器尺寸监听
BaseChart（ResizeObserver → echarts.resize）

第 1 层：根容器跟视口

ScreenLayout.vue

.screen-layout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

• 100vw / 100vh：根容器永远等于浏览器视口大小
• flex-direction: column：让 header 固定高度、main 区域 flex: 1 自动吃掉剩余空间
• box-sizing: border-box：padding 算在尺寸内，避免溢出

第 2 层：内容区 CSS Grid 等分

App.vue

.grid {
  flex: 1;                                /* 吃掉 main 全部高度 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 等分 */
  grid-template-rows: 1fr 1fr 0.8fr;      /* 行高比例 */
  gap: 16px;
  min-height: 0;                          /* 关键：允许收缩 */
}

.panel--wide { grid-column: span 2; }
.panel--full { grid-column: span 3; }

• 1fr 让单元格按比例自动伸缩，不写死像素
• span 2 / span 3 处理跨列卡片
• min-height: 0 是 flex/grid 嵌套里最关键的一行——不写会让子项撑爆父容器，出现滚动条

第 3 层：图表容器尺寸感知

BaseChart.vue:336-339

resizeObserver = new ResizeObserver(handleResize)
resizeObserver.observe(chartRef.value)

防抖处理 BaseChart.vue:265-270：

function handleResize() {
  clearTimeout(resizeTimer)
  resizeTimer = setTimeout(() => {
    chartInstance?.resize()
  }, props.resizeDelay)   // 默认 100ms
}

• 每个图表自己观察自己的容器，不监听 window.resize
• 任何让容器变化的场景（window resize、主题切换重排、侧边栏收缩、grid 重算）都能触发
• 防抖避免 ResizeObserver 每帧触发导致频繁重绘

---

三、关键 CSS 技巧

1. min-height: 0 / min-width: 0

flex / grid 子项的默认最小尺寸是其内容尺寸，导致子项无法收缩。在所有嵌套层都要显式覆盖：

.screen-layout__main { min-height: 0; }
.grid                { min-height: 0; }
.panel               { min-height: 0; }
.panel__chart        { min-height: 0; }

2. flex: 1 吃掉剩余空间

.screen-layout (flex column)
  .header   (height: 64px)        ← 固定
  .main     (flex: 1, min-height: 0)  ← 吃掉剩余
    .grid   (flex: 1)                 ← 继续填满
      .panel (flex column)
        .panel__title (固定高度)
        .panel__chart (flex: 1, min-height: 0)  ← 图表占满

3. 图表容器宽高 100%

BaseChart.vue:172-176

const containerStyle = computed(() => ({
  width: typeof props.width === 'number' ? `${props.width}px` : props.width,
  height: typeof props.height === 'number' ? `${props.height}px` : props.height,
  position: 'relative',
}))

默认 width: 100%; height: 100%，让图表完全跟随父容器，所有尺寸决策都交给上层 grid。

4. 防止 tooltip 溢出

.base-chart {
  overflow: hidden;   /* 防止 ECharts tooltip 撑开父容器 */
}

---

四、完整响应链路

用户拖动浏览器窗口时发生了什么：

1. window 尺寸变化
       ↓
2. 100vw / 100vh 自动跟随，.screen-layout 尺寸变化
       ↓
3. flex 重新分配：header 不变，main 跟着变
       ↓
4. grid 按 1fr 比例重新计算每个 panel 尺寸
       ↓
5. 每个 panel 内的 .base-chart 容器尺寸变化
       ↓
6. ResizeObserver 回调触发
       ↓
7. 100ms 防抖后调用 echarts.resize()
       ↓
8. 图表按新容器尺寸完整重绘

整个过程无 JS 计算缩放比、无 transform，全部交给浏览器原生布局引擎。

---

五、对比 useResize 方案的代码

下面是常见 scale 方案的简化版（本项目未使用），可对比理解：

// ❌ scale 方案：固定 1920×1080，整体缩放
export const useResize = (w = 1920, h = 1080) => {
  const screenRef = ref()
  const resize = () => {
    const scale = Math.min(innerWidth / w, innerHeight / h)
    screenRef.value.style.transform = `scale(${scale})`
    screenRef.value.style.transformOrigin = 'left top'
  }
  onMounted(() => {
    resize()
    window.addEventListener('resize', debounce(resize, 100))
  })
  return { screenRef }
}

<!-- 配合的 CSS -->
<div ref="screenRef" style="width: 1920px; height: 1080px;">
  <!-- 所有内容按 1920 设计稿写死 -->
</div>

问题：

• 内容没有真的重排，只是被整体缩小/放大
• 4K 屏上字体糊、Canvas 失真
• 极端宽屏（21:9）大量留白
• 局部 DOM（弹窗、tooltip）也被缩放，定位计算复杂

---

六、踩坑清单

现象	原因	解决
整体出现滚动条，无法 100% 撑满	flex/grid 子项忘了 min-height: 0	在所有嵌套层加上
图表显示为 0×0	ECharts init 时容器还没有尺寸	用 nextTick 等待 DOM 稳定
切换主题后图表尺寸错乱	主题切换销毁重建，DOM 未稳定	重建前 await nextTick()
ResizeObserver 高频触发卡顿	每帧都可能回调	用 setTimeout 防抖（100ms）
侧边栏收起后图表不变	监听了 window.resize 而非容器	改用 ResizeObserver 监听容器
Tooltip 撑开父容器出现滚动条	默认 overflow 可见	容器 overflow: hidden

---

七、适用边界与扩展方向

✅ 适合

• 自适应数据看板、监控大屏
• PC 后台管理系统的数据可视化模块
• 需要支持多分辨率（笔记本 + 大屏）的场景

⚠️ 不适合

• 严格还原 1920×1080 设计稿的展厅大屏（用 scale 方案更合适）
• 需要支持移动端的项目（应改用响应式断点 + 移动端单独布局）

🔧 可扩展

• 字号自适应：用 clamp() 或 vw 单位让标题/数值跟随视口

  .panel__title { font-size: clamp(12px, 1vw, 16px); }
  

• 断点切换布局：4K 屏改成 4×3 网格

  @media (min-width: 2560px) {
    .grid { grid-template-columns: repeat(4, 1fr); }
  }
  

• 横竖屏切换：监听 orientationchange，切换 grid 模板

---

八、一句话总结

本项目用浏览器原生的 vw/vh + flex + grid + ResizeObserver 实现真自适应，所有元素跟着视口真实重排，图表跟着容器真实重绘——不缩放、不失真、不写死像素，是比 transform: scale() 更"工程化"的大屏方案。