入门必看！

细心的小伙伴可能已经发现了，自v7.1.0版本开始，在创建大屏时多了一个选项，叫“弹性布局”。

1. 我们为什么推出弹性布局？
2. 弹性布局的适应场景？

要解释第1个问题我们为什么推出弹性布局，首先要搞清楚固定布局的适应场景以及优缺点才行💡

1. 固定布局

现有竞品市场上大都是这种布局方式，“自适应”能力是通过缩放来实现的，其实狭义上来说不能算是一种自适应，只是通过缩放的手段来确保大屏的内容可以完整的展示

1.1 适应场景

• 一些复杂的驾驶舱业务
• 固定尺寸的拼接屏幕、电视投屏、电脑展示
• 可用剩余空间一般都是固定的，不会随着屏幕的大小变化，剩余空间会自动增多或减少
  什么是剩余空间？
  

1.2 优缺点

目前想到的是以下几点，后续可完善补充☕

优点：

• 一般情况都是所见即所得(设计时看到的就是最终的成品)
• 上手容易，设计简单，通过拖拉拽的方式，在大屏中自由组合组件，可堆叠
• 制作速度快，可胜任复杂的布局或业务

缺点

• 无法充分利用剩余空间来进行内容展示
• 无自适应能力，只是通过缩放手段来确保内容尽可能的展示全
• 最终屏幕尺寸如果与设计尺寸不符，内容可能会模糊变形
  
  

下面解释为什么推出弹性布局，就好理解了，主要还是填补固定布局的短板(缺点)，也就是自适应能力，狭义上来讲是响应式，下面看DeepSeek的分析：

总结关系：可以认为响应式设计是实现自适应目标的一种主流且更优秀的技术手段。现在当我们说“做一个自适应网站”时，通常指的就是采用“响应式设计”方法。

数智大屏的弹性布局就是采用的响应式技术，核心实现技术是Grid

2. 弹性布局

该布局的使用方法这里就不过多叙述了，其它的章节有详细介绍
下面解释第2个问题：弹性布局的适应场景

2.1 适应场景

• 简单的工作看板，模板内容和交互不能过于复杂
• 对响应式布局能力有强烈要求的业务大屏
• 移动端模板首选弹性布局

总结一下：两种布局方式，各有所长，互相弥补，固定布局适合对响应式布局能力要求不高的用户，弹性布局相反；弹性布局的核心就是利用Grid技术实现了容器或组件剩余空间的利用和分配