更新时间:2024-07-11 GMT+08:00
分享

什么是适配多终端

当用户开发的高级页面应用于多种设备时,如何才能保证在不同大小的设备上,能够呈现同样的网页?为此,低代码平台提供了高级页面的电脑端和移动端两种终端视图、流式布局的响应式布局,并为绝对布局提供“拉伸”功能辅助自适应。另外,为确保自定义组件能够自适应不同分辨率设备,在组件开发中用户需要遵从响应式布局设计规范。组件的响应式设计,是高级页面适配多终端的重要前提。

电脑端和手机端视图

为了让同一网页能够完美呈现于电脑端和移动端,低代码平台提供了高级页面的电脑端和移动端两种终端视图,用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后,发布生成的高级页面为同一URL,当电脑端或移动端加载这一URL时,平台会自动检测加载相应视图页面。

  • 如果用户开发的高级页面用于多种设备,推荐使用具有响应式布局的流式布局进行高级页面开发。
  • 如果用户仅开发了电脑端高级页面,在移动端也可加载显示,但由于分辨率差别较大,可能会出现效果不佳的情况。所以,开发显示在电脑端和移动端设备的高级页面时,推荐用户对电脑端和移动端视图分别进行设计与开发,这样能更好的自适应电脑端和移动端设备。

下面将为您介绍,如何设置高级页面的电脑端和移动端视图以及如何进行视图切换。

  1. 在进行首个高级页面创建时,会进行视图选择。

    默认为选择电脑端和手机端两种视图,您也可以根据实际应用场景选择是否取消手机端视图,电脑端视图为必选项,不可取消选择勾选。
    图1 添加首个高级页面选择视图

  2. 在高级页面开发中,进行终端视觉切换。

    在高级页面上方的工具栏中,单击(Alt+Shift+W)切换至“电脑端”。单击(Alt+Shift+M)切换至“移动端”,通过切换,对电脑端和移动端,分别进行设计与开发。
    图2 视图切换

流式布局与绝对布局的自适应设计

以电脑端为例,分别为您介绍流式布局与绝对布局的自适应设计。
  • 流式布局

    流式布局为自适应布局,用于常规Web应用开发,例如电商网站、管理网站等。流式布局为12列栅格布局,可拖动组件右侧边界,按栅格进行组件宽度调整。组件高度将根据组件内容进行自适应,页面中组件将按照从左到右、从上到下的顺序依次排列。如图3所示,将组件拖入画布中,默认宽度为12栅格,通过拖动组件右侧边界调整两个组件宽度为6栅格,流式布局会自动调整组件位置,将第二个组件从第二行提升至第一行组件的右侧。

    图3 流式布局调节组件宽度

    在运行环境中,针对不同分辨率的终端或不同尺寸的浏览器窗口,流式布局始终以12列栅格为原则进行栅格分割,组件宽度也会根据栅格的宽度变化而自动调整,如图4所示。其中,组件本身需满足响应式设计,其开发规范请参见响应式组件开发基本原则

    图4 流式布局运行态自适应布局
  • 绝对布局

    绝对布局为固定尺寸页面,常用于IOC大屏页面开发。在绝对布局中,组件可在画布中任意位置进行拖拽放置,组件的宽高可自定义设置,组件位置和大小都为固定值。在页面右上角,单击,可进行当前页面视图设置,选择您所需要的应用屏幕大小。

    图5 设置绝对布局屏幕大小

    绝对布局一般情况下,不能进行自适应,在运行环境,若终端屏幕大小或浏览器窗口尺寸小于设定屏幕尺寸,会出现滚动条,如图6所示。如果终端屏幕大小或浏览器窗口尺寸大于设定屏幕尺寸,则内容居中外加背景。

    图6 绝对布局页面运行态出现滚动条

    为实现绝对布局自适应,低代码平台为绝对布局提供了“拉伸”辅助自适应功能。单击绝对布局的高级页面名称右侧的,选择“设置 > 基本设置”,勾选“拉伸”,如图7所示。

    图7 绝对布局拉伸设置

    勾选“拉伸”设置后,即可将页面宽度扩展至100%,以适应整个浏览器或设备的可视宽度。同时组件内容的宽度,也会根据其容器的宽度进行调整。在运行态,绝对布局针对不同分辨率的终端或不同尺寸浏览器窗口,以同等缩放比例对组件大小进行调整。其中,组件本身需满足响应式设计,其开发规范请参见响应式组件开发基本原则

响应式组件开发基本原则

组件的响应式设计,是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备,在组件开发中用户需要遵从响应式设计的基本原则。

  • 根据内容设计。

    不专注于特定屏幕宽度,而是专注于内容设计,当屏幕越小或浏览器窗口越窄时,内容所占的垂直高度越来越多,内容就要向下方自然延伸。建议从小屏幕开始,逐步设置断点(例如设备宽度320px、768px、1024px),针对不同设备进行设计,形成流动布局。

    针对复杂情况,可以使用CSS3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备,定义不同样式,选择应用不同的CSS规则。只有当该设定媒体查询与正在使用的设备匹配时,其对应的CSS规则才起作用。

    CSS语法如下:

    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }

    其中,参数说明如表1所示。

    表1 @media语法参数说明

    参数

    说明

    mediatype

    all

    用于所有设备。

    screen

    用于电脑屏幕、平板电脑、智能手机等。

    print

    用于打印机和打印预览。

    media feature

    aspect-ratio

    定义输出设备中,页面可见区域宽度与高度的比率。

    max-width

    定义输出设备中,页面最大可见区域的宽度。

    max-height

    定义输出设备中,页面最大可见区域的高度。

    min-width

    定义输出设备中,页面最小可见区域的宽度。

    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的复杂度,通过补充设计的方式逐步丰富布局。这样,通过移动优先,可以更轻松地开发响应式布局。

相关文档