设计稿还原：从 Figma 到真实大屏
说实话，很多前端同学看到设计稿就头疼。尤其是大屏项目，动不动就是 1920x1080 的固定尺寸，设计师还喜欢用各种奇奇怪怪的字体和间距。我刚开始做大屏时也踩过不少坑，今天就把这些经验掰开揉碎了讲给你听。
Figma/蓝湖设计稿分析：别急着写代码
拿到设计稿，我习惯先花 15 分钟做「设计稿体检」。不是看颜色好不好看，而是分析布局结构。
核心思路：把设计稿拆成「行」和「列」，再决定用 Grid 还是 Flexbox。
举个例子，一个典型的大屏通常长这样：
- 顶部：标题 + 时间（一行）
- 中部：左侧图表 + 中间地图 + 右侧图表（三列）
- 底部：数据滚动条或底部图表（一行）
你看，这不就是 Grid 的天然应用场景吗？行和列都清清楚楚。
我个人习惯在 Figma 里用「测量工具」先量一下各区域的占比。比如左侧占 25%，中间占 50%，右侧占 25%。这些比例在写 CSS 时直接转成 fr 单位就行。
小技巧：Figma 里按住 Alt 键可以快速测量元素间距。蓝湖的话，直接点元素就能看到尺寸和边距。
CSS Grid 实战：大屏布局的骨架
大屏项目我几乎必用 Grid。为什么？因为 Grid 天生就是做「二维布局」的。Flexbox 是一维的，处理行或列没问题，但遇到行和列交叉的情况就有点吃力了。
来看一个实际的大屏布局代码：
.dashboard {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 80px 1fr 60px;
gap: 16px;
height: 100vh;
padding: 16px;
}
.header {
grid-column: 1 / -1; /* 跨三列 */
grid-row: 1;
}
.map-area {
grid-column: 2;
grid-row: 2;
}
.left-panel {
grid-column: 1;
grid-row: 2;
}
.right-panel {
grid-column: 3;
grid-row: 2;
}
.footer {
grid-column: 1 / -1;
grid-row: 3;
}嗯，这里要注意：grid-column: 1 / -1 的意思是「从第一列开始，到最后一列结束」。这样顶部和底部就能横跨整个屏幕。
我在项目中遇到过一个问题：设计师给的间距是 20px，但大屏在不同分辨率下看起来间距忽大忽小。后来我改用 gap: 1vw，让间距跟着视口宽度走，效果就好多了。
Flexbox 实战：搞定内部细节
Grid 管大局，Flexbox 管细节。说白了，Grid 是「骨架」，Flexbox 是「血肉」。
比如左侧面板里有三个图表卡片，垂直排列。用 Flexbox 就很简单：
.left-panel {
display: flex;
flex-direction: column;
gap: 12px;
}
.chart-card {
flex: 1; /* 每个卡片等分高度 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}你想想看，如果这里用 Grid 去写，反而要定义行高，不够灵活。Flexbox 的 flex: 1 自动均分剩余空间，省事多了。
避坑指南：我曾经在 Flexbox 里嵌套 Grid，又在 Grid 里嵌套 Flexbox，结果嵌套太深，浏览器渲染卡顿。后来我给自己定了个规矩：最多嵌套三层。超过三层就考虑抽组件。
响应式大屏适配方案：别只用 rem
说到大屏适配，很多人第一反应就是 rem。但 rem 有个问题：它基于根字体大小，而大屏的缩放逻辑其实更接近「等比缩放」。
我个人推荐三种方案，按场景选：
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| vw/vh 单位 | 全屏大屏 | 直接等比缩放，简单粗暴 | 小屏上文字可能太小 |
| transform: scale() | 固定尺寸设计稿 | 完美还原设计稿 | 交互区域会偏移 |
| CSS 媒体查询 + clamp() | 混合场景 | 精细控制每个断点 | 代码量较大 |
我最常用的是 vw/vh 方案。比如设计稿是 1920x1080，那么：
/* 设计稿上 100px 的宽度 */
width: calc(100 / 1920 * 100vw);
/* 设计稿上 16px 的字体 */
font-size: calc(16 / 1920 * 100vw);但有个坑：如果屏幕比例不是 16:9，内容会被拉伸。我一般会加一个 max-width 和 max-height 来兜底。
我的习惯：写一个 Sass 函数，自动把 px 转成 vw。比如 font-size: vw(16);，这样写起来快，后期改设计稿也方便。
实战案例：一个完整的大屏适配流程
光说不练假把式。咱们走一遍完整流程：
- 分析设计稿：打开 Figma，看布局结构。顶部导航 + 三列内容 + 底部状态栏。
- 定 Grid 骨架：
grid-template-columns: 1fr 2fr 1fr，中间地图区域占两倍宽度。 - 写 Flexbox 细节：每个面板内部用 Flexbox 排列图表卡片。
- 做适配：用 vw 单位写尺寸，用
clamp()限制最大最小值。 - 测试：在 1920x1080、1366x768、2560x1440 三个分辨率下跑一遍。
为什么会强调这三个分辨率？因为这是大屏项目最常见的三种屏幕。我遇到过客户现场是 2560 的带鱼屏，结果页面两边全是空白。后来加了 max-width: 1920px 居中显示，才解决问题。
核心总结：Grid 定大局，Flexbox 管内部，vw 做适配。这三板斧用好了，大屏设计稿还原基本不会出大问题。
好了，这一章的内容就到这。下一章咱们聊聊「数据对接与动态渲染」，到时候会讲到怎么把真实数据塞进这些图表里。记得提前准备好你的 API 接口文档。