# 什么是适配多终端
当用户开发的高级页面应用于多种设备时，如何才能保证在不同大小的设备上，能够呈现同样的网页？为此，低代码平台提供了高级页面的电脑端和移动端两种终端视图、流式布局的响应式布局，并为绝对布局提供"拉伸"功能辅助自适应。另外，为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式布局设计规范。组件的响应式设计，是高级页面适配多终端的重要前提。
#### 电脑端和手机端视图
为了让同一网页能够完美呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后，发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测加载相应视图页面。
![](https://support.huaweicloud.com/usermanual-astrozero/public_sys-resources/note_3.0-zh-cn.png)
- 如果用户开发的高级页面用于多种设备，推荐使用具有响应式布局的流式布局进行高级页面开发。
- 如果用户仅开发了电脑端高级页面，在移动端也可加载显示，但由于分辨率差别较大，可能会出现效果不佳的情况。所以，开发显示在电脑端和移动端设备的高级页面时，推荐用户对电脑端和移动端视图分别进行设计与开发，这样能更好的自适应电脑端和移动端设备。
 
下面将为您介绍，如何设置高级页面的电脑端和移动端视图以及如何进行视图切换。
1. 在进行首个高级页面创建时，会进行视图选择。 
   默认为选择电脑端和手机端两种视图，您也可以根据实际应用场景选择是否取消手机端视图，电脑端视图为必选项，不可取消选择勾选。
   图1添加首个高级页面选择视图   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047496.png "点击放大")
   
   
2. 在高级页面开发中，进行终端视觉切换。 
   在高级页面上方的工具栏中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888120.png)（Alt+Shift+W）切换至"电脑端"。单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047520.png)（Alt+Shift+M）切换至"移动端"，通过切换，对电脑端和移动端，分别进行设计与开发。
   图2视图切换   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126825.png "点击放大")
   
   
#### 流式布局与绝对布局的自适应设计
以电脑端为例，分别为您介绍流式布局与绝对布局的自适应设计。
- 流式布局 流式布局为自适应布局，用于常规Web应用开发，例如电商网站、管理网站等。流式布局为12列栅格布局，可拖动组件右侧边界，按栅格进行组件宽度调整。组件高度将根据组件内容进行自适应，页面中组件将按照从左到右、从上到下的顺序依次排列。如[图3]所示，将组件拖入画布中，默认宽度为12栅格，通过拖动组件右侧边界调整两个组件宽度为6栅格，流式布局会自动调整组件位置，将第二个组件从第二行提升至第一行组件的右侧。
  图3流式布局调节组件宽度   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047500.gif "点击放大")
  在运行环境中，针对不同分辨率的终端或不同尺寸的浏览器窗口，流式布局始终以12列栅格为原则进行栅格分割，组件宽度也会根据栅格的宽度变化而自动调整，如[图4]所示。其中，组件本身需满足响应式设计，其开发规范请参见[响应式组件开发基本原则]。
  图4流式布局运行态自适应布局   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047504.png "点击放大") 
 
- 绝对布局 绝对布局为固定尺寸页面，常用于IOC大屏页面开发。在绝对布局中，组件可在画布中任意位置进行拖拽放置，组件的宽高可自定义设置，组件位置和大小都为固定值。在页面右上角，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888108.png)，可进行当前页面视图设置，选择您所需要的应用屏幕大小。
  图5设置绝对布局屏幕大小   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047516.png "点击放大")
  绝对布局一般情况下，不能进行自适应，在运行环境，若终端屏幕大小或浏览器窗口尺寸小于设定屏幕尺寸，会出现滚动条，如[图6]所示。如果终端屏幕大小或浏览器窗口尺寸大于设定屏幕尺寸，则内容居中外加背景。
  图6绝对布局页面运行态出现滚动条   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126829.png "点击放大")
  为实现绝对布局自适应，低代码平台为绝对布局提供了"拉伸"辅助自适应功能。单击绝对布局的高级页面名称右侧的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047524.png)，选择"设置 \> 基本设置"，勾选"拉伸"，如[图7]所示。
  图7绝对布局拉伸设置   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047512.png "点击放大")
  勾选"拉伸"设置后，即可将页面宽度扩展至100%，以适应整个浏览器或设备的可视宽度。同时组件内容的宽度，也会根据其容器的宽度进行调整。在运行态，绝对布局针对不同分辨率的终端或不同尺寸浏览器窗口，以同等缩放比例对组件大小进行调整。其中，组件本身需满足响应式设计，其开发规范请参见[响应式组件开发基本原则]。
  
 
 #### 响应式组件开发基本原则
组件的响应式设计，是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式设计的基本原则。
- 根据内容设计。 不专注于特定屏幕宽度，而是专注于内容设计，当屏幕越小或浏览器窗口越窄时，内容所占的垂直高度越来越多，内容就要向下方自然延伸。建议从小屏幕开始，逐步设置断点（例如设备宽度320px、768px、1024px），针对不同设备进行设计，形成流动布局。
  针对复杂情况，可以使用CSS3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备，定义不同样式，选择应用不同的CSS规则。只有当该设定媒体查询与正在使用的设备匹配时，其对应的CSS规则才起作用。
  CSS语法如下：
  ```
  @media mediatype and|not|only (media feature) {
      CSS-Code;
  }
  ```
  其中，参数说明如[表1]所示。
   表1@media语法参数说明 
  | 参数            | 值            | 说明                      |
  |:---|:---|:---|
  | mediatype     | all          | 用于所有设备。                 |
  | mediatype     | screen       | 用于电脑屏幕、平板电脑、智能手机等。      |
  | mediatype     | print        | 用于打印机和打印预览。             |
  | media feature | aspect-ratio | 定义输出设备中，页面可见区域宽度与高度的比率。 |
  | media feature | max-width    | 定义输出设备中，页面最大可见区域的宽度。    |
  | media feature | max-height   | 定义输出设备中，页面最大可见区域的高度。    |
  | media feature | min-width    | 定义输出设备中，页面最小可见区域的宽度。    |
  | media feature | min-height   | 定义输出设备中，页面最小可见区域的高度。    |
     
  设置示例：对页面宽度不同的设备，设定不同背景颜色。
  ```
  /*媒体查询*/
  /*页面宽度大于1200px 时，背景颜色为蓝色，主要用于大屏设备*/
  @media screen and (min-width: 1200px) {
      body {
          background-color:blue;
      }
  }
  /*页面宽度在992px和1200px之间，背景颜色为红色，用于中等屏幕PC端*/
  @media screen and (min-width: 992px){
      body {
          background-color:red;
      }
  }
  ```
  
- 避免固定尺寸。
  使用像px这样的绝对单位，来指定元素的宽高、边框和字体大小等，固定宽度容易破坏响应式布局。为了布局更加灵活，推荐使用百分比、em或rem等相对单位，这样可以保证浏览器字体大小调整和缩放时，能正常显示。常用相对单位，如[表2]所示。
   表2常用相对单位 
  | 单位  | 说明                                                   |
  |:---|:---|
  | em  | 在font-size中，使用相对于父元素的字体大小，在其他属性中使用相对于自身的字体大小，如width。 |
  | rem | 相对根元素的字体大小。                                          |
  | ch  | 相对于数字"0"的宽度。                                         |
  | ex  | 相对于字符"x"的高度。                                         |
  | lh  | 相对于元素line-height计算值。                                 |
     
  
- 最大和最小值。 对于大屏页面和移动端，内容扩充占满整个屏幕宽度并不总是适用的。展示同样的内容，手机端可能更适宜充满屏幕宽度，而大屏则需要在宽度上留出一定边界，使得布局上更加美观。所以，设定最大值或最小值，可以帮助您设计更为合理的布局。例如，组件宽度设定100%，最大宽度设定1024px，那么内容扩充的最大宽度即为1024px，当屏幕宽度超出1024时，内容在宽度上不会再继续扩展。
  
- 嵌套对象。 对于关系紧密的多个元素，采用相对位置会使得元素难以控制。此时，可以考虑放置于同一容器中集中管理。在容器内部，可以考虑采用绝对单位固定其关系，这对于不需要扩展的按钮等元素来说非常有效。
  
- 图片的自适应。 自适应组件设计还需要满足图片的自适应，可以使用max-width，对图片宽度进行限制，确保图片宽度不会超过浏览器窗口或容器可视部分的宽度。
  
- 移动优先。 通常来说，移动端屏幕较小、视图简单，而大屏空间大、呈现更为复杂和多样。那么，从移动端小屏幕设计入手过渡到大屏幕设计，在开发中逐步增加CSS的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。