“为什么你开发的界面在我的屏幕上那么小？”“为什么这个界面有水平滚动条？”大家都在做前端界面，你在开发的时候遇到过这些类似的问题吗？如何解决？PageResponsive在项目交付场景中，经常会出现在不同设备和屏幕尺寸上使用和显示的项目系统。因此，需要在开发过程中有针对性地应对这种场景。一般来说，在处理此类问题时，我们需要开发并提供不同的布局，通过检测视口的分辨率，判断当前访问设备的类型，请求不同的页面布局来提供尺寸更合适的展示场景.对于不同的布局，可以选择提前完成开发，也可以通过判断窗口大小动态调整最终页面来达到效果，业内称之为页面响应式布局。不同尺寸下的响应式页面布局那么，在低代码领域，对于预先设计好的页面元素，如何实现页面的响应式变化呢？让我们来看看活字格子是如何工作的吧！活字网格的实践一直在不断增强页面的响应能力。在早期的版本中，MovableType提供了页面拉伸模式，以帮助用户更好地使页面布局适应屏幕大小。在之后的迭代中，活字格子增加了粒度精确到行列的模式设置。通过修改行和列的性质，保证页面动态准确地填充整个显示屏幕。页面拉伸模式在MovableType中，您可以全局或为单个页面设置页面拉伸模式。单个页面的设置只对本页面生效，而全局的影响范围扩展到整个应用。活字网格为用户提供了五种拉伸模式，方便用户在不同场景下选择：不拉伸：页面在浏览器中不会被拉伸，与设计原型一致。Horizo??ntalStretch：页面根据浏览器的大小在不同的浏览器中水平拉伸。垂直拉伸：页面根据浏览器的大小在不同的浏览器中进行垂直拉伸。双向拉伸：页面在不同浏览器中根据浏览器大小进行横向和纵向拉伸，使其在充满不同分辨率的浏览器时有更好的视觉效果。等量拉伸（填充宽度）??：页面会先填充浏览器的宽度，然后再按比例拉伸高度。拉伸的是页面的整体元素，所以很难做到部分固定，部分拉伸的效果。所以这个特性不太适用于对页面精度要求比较高的场景。Movabletype为此类场景提供了行和列模式设置。行列模式设置行列模式为活字格的版面设计注入了新的活力和可能性。在了解行列模式之前，我们需要先对一种布局有一个直接的了解，这就是活字网格所采用的网格（Grid）布局。网格（Grid）布局网格布??局（Grid）是一种CSS（CascadingStyleSheet，一种为网页添加页面样式的计算机语言）布局方案，也是用途最广的一种。其原理是将网页划分成网格，将不同的网格任意组合成各种布局。网格布局图由于网格属于标准的二维布局，网格布局将页面分为“行”和“列”，生成单元格，单元格的设置和组合最终形成页面的最终效果。活字格子的设计器是excel-like风格，天生就是适应Grid布局的高手。活动式网格为用户提供固定模式、自适应模式和范围模式三种设置模式。通过将行高和列宽的调整模式设置为自适应模式或范围模式，页面可以呈现出流畅的布局，使页面的布局更加灵活。固定模式在固定模式下，行高和列宽是固定的，单位是像素，不会随显示屏的变化而变化。如果页面上设置为固定模式的所有行和列的总像素大于浏览器的宽度/高度，则浏览器中会出现水平/垂直滚动条。自适应模式在MovableType中，自适应不是页面适配，而是组件适配。活字格的页面设计是所见即所得，每个组件都是通过单元格的组合形成的。为组件设置自适应后，组件会根据内部内容动态改变高度或宽度。例如，文本框会根据输入的文本内容动态调整其边框大小，附属单元格会随着数据量的增加而扩展高度。范围模式范围模式的主要作用是填满整个浏览器屏幕，也是最推荐的实现流式布局的方式。在活字网格中，范围模式提供了两种根据像素和比例设置范围的方式。比例为1，即如果整个页面，只有当前列设置比例为1，那么只有这一列会填满整个页面。而如果页面中有两列的比例设置为1，则这两列将按照各自的1/2范围填充整个页面。如果一列设置为1份，另一列设置为2份，那么最终的padding效果是设置为1的列占1/3，其他列占2/3。活字格的每一行每一列都可以设置为以上3种模式，当一个占据多行区域的单元格设置为一行或一列时，容器区域内部会自动展开。例如：表格、图形列表、数据透视表、页面容器单元格、标签页、选项卡等。多行区域的单元格范围设置可以通过设置范围模式实现自动填充页面的效果。小结通过页面拉伸和行列设置的灵活运用，活字格所涉及的应用可以灵活适配不同尺寸的显示终端。此外，活字格还提供了移动端界面，方便用户在移动端下设计更加美观灵活的界面。
