一、大屏自适应概述
大家好，我是老张。做前端这么多年，大屏项目我接触了不少。今天咱们聊聊大屏自适应这个事儿。
说白了，大屏自适应就是让你的页面，在不同尺寸的屏幕上都能正常显示。你想想看，客户现场可能是 1920×1080 的普通屏，也可能是 3840×2160 的 4K 大屏，甚至可能是 1366×768 的老旧设备。如果页面写死了，换个屏幕就崩了，那多尴尬。
1.1 什么是大屏自适应
大屏自适应，核心就一句话：页面元素能根据屏幕尺寸自动调整大小和位置。
我习惯把它分成三个层面：
- 布局自适应：栅格、弹性布局，让模块自动换行或伸缩
- 尺寸自适应：字体、图表、图片按比例缩放
- 内容自适应：数据量多时显示更多，少时保持美观
核心目标：在不同分辨率下，页面看起来都「刚刚好」——不溢出、不空白、不遮挡。
1.2 为什么需要自适应
这个问题我问过不少新人。有人回答「为了好看」，有人回答「为了兼容」。其实都不全面。
我在项目中遇到过这么个事：给某市政府做智慧城市大屏，现场是 3×5 的拼接屏，总分辨率 11520×2160。如果按固定像素写，那页面在普通显示器上根本没法看。后来我用了 rem + vw 的方案，才搞定。
总结下来，需要自适应的原因有这几个：
- 硬件差异大：从 13 寸笔记本到 200 寸拼接屏，跨度太大
- 客户要求高：领导们就喜欢「满屏显示」，不能有黑边
- 维护成本低：一套代码适配所有屏幕，不用每个分辨率单独开发
- 体验一致性：不管在哪个屏幕上看，数据展示效果都一样好
注意：千万别以为「用百分比就完事了」。百分比只能解决宽度问题，高度、字体、图表大小都得单独处理。
1.3 常见的自适应方案概览
嗯，这里我给大家梳理一下市面上主流的方案。每种方案都有它的适用场景，没有银弹。
| 方案名称 | 核心原理 | 适用场景 | 我的评价 |
|---|---|---|---|
| rem 方案 | 根据根字体大小缩放 | 内容型页面、图表为主 | 成熟稳定，推荐 |
| vw/vh 方案 | 视口单位直接缩放 | 全屏展示、无滚动条 | 简单粗暴，好用 |
| scale 方案 | CSS transform 整体缩放 | 固定设计稿、快速适配 | 省事但有局限 |
| flex/grid 方案 | 弹性布局自动排列 | 模块化、组件化页面 | 现代首选，灵活 |
| 媒体查询方案 | 断点切换样式 | 多端适配、响应式 | 代码冗余，不推荐 |
我个人习惯的做法是：rem + vw 混合使用。rem 控制字体和间距，vw 控制图表容器。这样既保证了缩放比例，又不会出现字体太小的问题。
小技巧：如果你用 ECharts，记得在 resize 事件里调用 chart.resize()。我曾经忘了这步，结果图表在大屏上挤成一团，被客户当场吐槽。
1.4 选型建议
最后给新手一点建议。别一上来就想着「最牛」的方案。先问自己三个问题：
- 目标屏幕是固定的还是多变的？
- 页面内容多不多？有没有滚动条？
- 团队对哪种方案最熟悉？
如果屏幕固定，比如展厅大屏，直接用 scale 方案最省事。如果屏幕多变，比如领导用笔记本投屏，那 rem + vw 更稳妥。
好了，这一章就聊到这儿。下一章我会手把手带大家实现一个 rem 自适应方案，到时候咱们再细聊。