网络
虚拟私有云 VPC
弹性公网IP EIP
弹性负载均衡 ELB
NAT网关 NAT
云专线 DC
虚拟专用网络 VPN
云连接 CC
VPC终端节点 VPCEP
企业路由器 ER
企业交换机 ESW
全球加速 GA
企业连接 EC
云原生应用网络 ANC
安全与合规
安全技术与应用
Web应用防火墙 WAF
企业主机安全 HSS
云防火墙 CFW
安全云脑 SecMaster
DDoS防护 AAD
数据加密服务 DEW
数据库安全服务 DBSS
云堡垒机 CBH
数据安全中心 DSC
云证书管理服务 CCM
威胁检测服务 MTD
态势感知 SA
认证测试中心 CTC
边缘安全 EdgeSec
应用中间件
微服务引擎 CSE
分布式消息服务Kafka版
分布式消息服务RabbitMQ版
分布式消息服务RocketMQ版
API网关 APIG
分布式缓存服务 DCS
多活高可用服务 MAS
事件网格 EG
管理与监管
统一身份认证服务 IAM
消息通知服务 SMN
云监控服务 CES
应用运维管理 AOM
应用性能管理 APM
云日志服务 LTS
云审计服务 CTS
标签管理服务 TMS
配置审计 Config
应用身份管理服务 OneAccess
资源访问管理 RAM
组织 Organizations
资源编排服务 RFS
优化顾问 OA
IAM 身份中心
云运维中心 COC
资源治理中心 RGC
解决方案
高性能计算 HPC
SAP
混合云灾备
开天工业工作台 MIW
Haydn解决方案工厂
数字化诊断治理专家服务
云生态
云商店
合作伙伴中心
华为云开发者学堂
华为云慧通差旅
开发与运维
软件开发生产线 CodeArts
需求管理 CodeArts Req
流水线 CodeArts Pipeline
代码检查 CodeArts Check
编译构建 CodeArts Build
部署 CodeArts Deploy
测试计划 CodeArts TestPlan
制品仓库 CodeArts Artifact
移动应用测试 MobileAPPTest
CodeArts IDE Online
开源镜像站 Mirrors
性能测试 CodeArts PerfTest
应用管理与运维平台 ServiceStage
云应用引擎 CAE
开源治理服务 CodeArts Governance
华为云Astro轻应用
CodeArts IDE
Astro工作流 AstroFlow
代码托管 CodeArts Repo
漏洞管理服务 CodeArts Inspector
联接 CodeArtsLink
软件建模 CodeArts Modeling
Astro企业应用 AstroPro
CodeArts盘古助手
华为云Astro大屏应用
计算
弹性云服务器 ECS
Flexus云服务
裸金属服务器 BMS
云手机服务器 CPH
专属主机 DeH
弹性伸缩 AS
镜像服务 IMS
函数工作流 FunctionGraph
云耀云服务器(旧版)
VR云渲游平台 CVR
Huawei Cloud EulerOS
云化数据中心 CloudDC
网络
虚拟私有云 VPC
弹性公网IP EIP
弹性负载均衡 ELB
NAT网关 NAT
云专线 DC
虚拟专用网络 VPN
云连接 CC
VPC终端节点 VPCEP
企业路由器 ER
企业交换机 ESW
全球加速 GA
企业连接 EC
云原生应用网络 ANC
CDN与智能边缘
内容分发网络 CDN
智能边缘云 IEC
智能边缘平台 IEF
CloudPond云服务
安全与合规
安全技术与应用
Web应用防火墙 WAF
企业主机安全 HSS
云防火墙 CFW
安全云脑 SecMaster
DDoS防护 AAD
数据加密服务 DEW
数据库安全服务 DBSS
云堡垒机 CBH
数据安全中心 DSC
云证书管理服务 CCM
威胁检测服务 MTD
态势感知 SA
认证测试中心 CTC
边缘安全 EdgeSec
大数据
MapReduce服务 MRS
数据湖探索 DLI
表格存储服务 CloudTable
可信智能计算服务 TICS
推荐系统 RES
云搜索服务 CSS
数据可视化 DLV
数据接入服务 DIS
数据仓库服务 GaussDB(DWS)
数据治理中心 DataArts Studio
湖仓构建 LakeFormation
智能数据洞察 DataArts Insight
应用中间件
微服务引擎 CSE
分布式消息服务Kafka版
分布式消息服务RabbitMQ版
分布式消息服务RocketMQ版
API网关 APIG
分布式缓存服务 DCS
多活高可用服务 MAS
事件网格 EG
开天aPaaS
应用平台 AppStage
开天企业工作台 MSSE
开天集成工作台 MSSI
API中心 API Hub
云消息服务 KooMessage
交换数据空间 EDS
云地图服务 KooMap
云手机服务 KooPhone
组织成员账号 OrgID
云空间服务 KooDrive
管理与监管
统一身份认证服务 IAM
消息通知服务 SMN
云监控服务 CES
应用运维管理 AOM
应用性能管理 APM
云日志服务 LTS
云审计服务 CTS
标签管理服务 TMS
配置审计 Config
应用身份管理服务 OneAccess
资源访问管理 RAM
组织 Organizations
资源编排服务 RFS
优化顾问 OA
IAM 身份中心
云运维中心 COC
资源治理中心 RGC
区块链
区块链服务 BCS
数字资产链 DAC
华为云区块链引擎服务 HBS
解决方案
高性能计算 HPC
SAP
混合云灾备
开天工业工作台 MIW
Haydn解决方案工厂
数字化诊断治理专家服务
价格
成本优化最佳实践
专属云商业逻辑
云生态
云商店
合作伙伴中心
华为云开发者学堂
华为云慧通差旅
其他
管理控制台
消息中心
产品价格详情
系统权限
客户关联华为云合作伙伴须知
公共问题
宽限期保留期
奖励推广计划
活动
云服务信任体系能力说明
开发与运维
软件开发生产线 CodeArts
需求管理 CodeArts Req
流水线 CodeArts Pipeline
代码检查 CodeArts Check
编译构建 CodeArts Build
部署 CodeArts Deploy
测试计划 CodeArts TestPlan
制品仓库 CodeArts Artifact
移动应用测试 MobileAPPTest
CodeArts IDE Online
开源镜像站 Mirrors
性能测试 CodeArts PerfTest
应用管理与运维平台 ServiceStage
云应用引擎 CAE
开源治理服务 CodeArts Governance
华为云Astro轻应用
CodeArts IDE
Astro工作流 AstroFlow
代码托管 CodeArts Repo
漏洞管理服务 CodeArts Inspector
联接 CodeArtsLink
软件建模 CodeArts Modeling
Astro企业应用 AstroPro
CodeArts盘古助手
华为云Astro大屏应用
存储
对象存储服务 OBS
云硬盘 EVS
云备份 CBR
高性能弹性文件服务 SFS Turbo
弹性文件服务 SFS
存储容灾服务 SDRS
云硬盘备份 VBS
云服务器备份 CSBS
数据快递服务 DES
云存储网关 CSG
专属分布式存储服务 DSS
数据工坊 DWR
地图数据 MapDS
键值存储服务 KVS
容器
云容器引擎 CCE
云容器实例 CCI
容器镜像服务 SWR
云原生服务中心 OSC
应用服务网格 ASM
华为云UCS
数据库
云数据库 RDS
数据复制服务 DRS
文档数据库服务 DDS
分布式数据库中间件 DDM
云数据库 GaussDB
云数据库 GeminiDB
数据管理服务 DAS
数据库和应用迁移 UGO
云数据库 TaurusDB
人工智能
AI开发平台ModelArts
华为HiLens
图引擎服务 GES
图像识别 Image
文字识别 OCR
自然语言处理 NLP
内容审核 Moderation
图像搜索 ImageSearch
医疗智能体 EIHealth
企业级AI应用开发专业套件 ModelArts Pro
人脸识别服务 FRS
对话机器人服务 CBS
语音交互服务 SIS
人证核身服务 IVS
视频智能分析服务 VIAS
城市智能体
自动驾驶云服务 Octopus
盘古大模型 PanguLargeModels
IoT物联网
设备接入 IoTDA
全球SIM联接 GSL
IoT数据分析 IoTA
路网数字化服务 DRIS
IoT边缘 IoTEdge
设备发放 IoTDP
企业应用
域名注册服务 Domains
云解析服务 DNS
企业门户 EWP
ICP备案
商标注册
华为云WeLink
华为云会议 Meeting
隐私保护通话 PrivateNumber
语音通话 VoiceCall
消息&短信 MSGSMS
云管理网络
SD-WAN 云服务
边缘数据中心管理 EDCM
云桌面 Workspace
应用与数据集成平台 ROMA Connect
ROMA资产中心 ROMA Exchange
API全生命周期管理 ROMA API
政企自服务管理 ESM
视频
实时音视频 SparkRTC
视频直播 Live
视频点播 VOD
媒体处理 MPC
视频接入服务 VIS
数字内容生产线 MetaStudio
迁移
主机迁移服务 SMS
对象存储迁移服务 OMS
云数据迁移 CDM
迁移中心 MGC
专属云
专属计算集群 DCC
开发者工具
SDK开发指南
API签名指南
DevStar
华为云命令行工具服务 KooCLI
Huawei Cloud Toolkit
CodeArts API
云化转型
云架构中心
云采用框架
用户服务
账号中心
费用中心
成本中心
资源中心
企业管理
工单管理
客户运营能力
国际站常见问题
支持计划
专业服务
合作伙伴支持计划
我的凭证
华为云公共事业服务云平台
工业软件
工业数字模型驱动引擎
硬件开发工具链平台云服务
工业数据转换引擎云服务

AstroZero高级页面概述

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

什么是高级页面

高级页面是由一个或者多个组件拼装而成。高级页面可以使用组件进行组装和配置,方便用户达到自己想要的效果。高级页面支持多种框架,支持代码开发,比较自由,多用于对页面效果要求高的场景。

高级页面主要用于开发应用中较复杂的前端页面,例如包含图片、图表、视频、地图等元素的页面。您可以将高级页面应用于开发网站、电商平台等,通过拖拽、布局组件,并进行相关属性配置即可快速搭建应用。低代码平台中的高级页面,提供了常用组件,组件包含了预置的样式,并封装了基础事件代码,实现了开箱即用,避免重复写样式和事件代码,陷入代码细节,使开发人员更好的专注于业务场景的挖掘。

初识高级页面开发界面

图1 高级页面开发界面

高级页面开发工作台,功能模块布局说明如下:

  • 高级页面工具栏(序号1)
    展示页面开发过程中的常用工具,如保存、发布,电脑端或者移动端页面设置等。
    • :用于展开、收起高级组件列表。
    • /:为了让同一页面能够更好的呈现于电脑端和移动端,低代码平台提供了高级页面的电脑端和移动端两种终端视图,用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL,当电脑端或移动端加载这一URL时,平台会自动检测用户所用的设备类型并加载相应视图页面。
    • :保存当前开发页面的修改。
    • :发布当前开发的页面,页面发布后可以预览该页面的运行态效果。

      页面修改、保存后,需再次执行发布操作,才能在应用和预览页面中体现修改内容。

    • :页面发布后,可以预览该页面运行态效果。
    • :页面开发完成后,可将该页面发布为模板。
    • /:页面开发过程中如果出现误操作,可执行撤销、复原操作。
    • :低代码平台支持检查高级页面性能,生成性能报告页供开发者查看。
    • /:用于调节页面画布在开发工作台中的大小比例。
    • :自动适应页面画布在开发工作台中的大小比例。
    • :开启画布网格线功能,用于标定组件在画布中的位置。
    • :设置高级页面的分辨率、网格大小、背景颜色和背景图片。
    • :设置页面的状态。
  • 组件分类列表(序号2)

    包含高级组件的功能分类,用于在开发高级页面时对组件进行筛选,方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等,可选择相应的分类来筛选高级组件。

  • 高级组件展示、选择区域(序号2、3)
    选定序号2的组件分类后,属于该功能分类的组件将显示在序号3的区域。在该区域中,还包含了搜索框、应用场景、预置和自定义多种筛选条件。
    • 搜索框:通过组件名称,可快速查询归属于当前选定组件分类中的高级组件。
      图2 搜索框
    • 应用场景筛选:可快速筛选不同应用场景的高级组件,当前应用场景包含通用、智慧园区、5G消息和其他等。
      图3 应用场景筛选
    • 预置和自定义筛选:用于筛选当前选定组件分类,包括预置组件和用户自定义组件。

      预置组件是低代码平台提供的全局高级组件,详情请参见设置AstroZero高级页面预置组件属性。自定义组件为用户自主开发的高级组件,详情请参见为AstroZero高级页面添加自定义组件

  • 画布(序号4)
    编辑页面内容及页面视图区域,可将组件从高级组件展示选择区域拖入该区域,快速搭建高级页面。下面以绝对布局方式的高级页面为例进行介绍。
    • 定位到所需组件后,便可以将其拖动到画布中,用于构建所需的高级页面。
      图4 拖拽组件到画布中
    • 在画布中,可以通过拖拽的方式调整组件的位置、大小。低代码平台还提供了组件对齐提示线,帮助布局组件。
      图5 调整组件
    • 组件的右键设置:在画布中选中组件,单击鼠标右键会弹出删除、复制、粘贴(如果已复制组件)、格式刷、置于顶层、置于底层、高级设置选项。
      • 删除:删除当前选中的高级组件,也可通过键盘中BackSpace键(退格键)和Delete键(删除键)实现。
      • 复制:复制当前选中的高级组件,也可通过快捷键Ctrl+C实现。
      • 粘贴:用于粘贴已复制的高级组件,也可通过快捷键Ctrl+V实现。
      • 格式刷:用于复制当前选中组件的属性,应用于其他组件。可选的属性包含样式(边框、背景)、位置(距左、距上、高度、宽度)和其他属性。选定所需格式刷内容后,光标会变成刷子样式,单击所需格式刷组件即可。
        图6 格式刷操作示例
      • 置于底层/顶层:用于设置当前选中高级组件的堆叠顺序,即CSS中的z-index属性。仅绝对布局类型的高级页面,存在该设置选项。
      • 高级设置:用于设置当前组件的样式属性,全局高级组件详细介绍,请参见设置AstroZero高级页面预置组件属性
  • 组件属性设置区域(序号5)

    未选中画布中任何组件时,此模块显示内容为“当前视图组件列表”即当前页面中所布局的组件列表。您可以通过选择画布中或列表中的组件,切换到该组件的“组件属性设置”栏,进行当前选中组件的属性设置、数据设置、事件绑定和路由设置。

高级页面开发框架

在开发高级页面过程中,主要涉及组件、库、桥接器、事件和动作等相关内容。组件、库、桥接器、事件和动作之间的关系,可概述为:

  • 组件为高级页面的元素,组件的可复用性可以大幅提高开发效率。
  • 组件的事件-动作机制提升页面的灵活度,使得组件与组件、组件与页面之间可以交互。
  • 作为组件的依赖,便捷的引用机制,降低了组件开发的复杂度且丰富了组件的功能。
  • 组件可以通过桥接器调用后台接口,获取数据。

低代码平台通过组件、库、桥接器三类资产以及“事件-动作”机制,构建了高级页面的基本框架。

图7 组件、库、桥接器关系图
  • 组件

    组件是可复用的高级页面组成元素,一个高级页面由一个或多个组件搭建而成,可以通过拖拽组件快速搭建高级页面。如果将一个高级页面看成拼图游戏的完整图案,那么组件相当于拼图的每一小块。高级页面与组件的关系,如图8所示,其中Page为高级页面,Widget为高级组件。

    图8 高级页面与组件的关系

    高级页面中的组件,包括如下两类:

    • 全局高级组件

      全局高级组件是低代码平台为开发者提供的常用组件,主要包含图表、媒体(图片、视频)和文本等。更多关于全局高级组件的介绍,请参见设置AstroZero高级页面预置组件属性

    • 自定义组件

      如果全局高级组件不能满足开发需求,低代码平台支持用户自定义组件。自定义组件开发方式,主要包含以下几类:

      • 对全局高级组件的二次开发

        低代码平台支持开发者下载全局组件,并在其基础上进行二次开发(如修改组件样式、逻辑等),完成后上传为自定义组件。通过这种方式,可以大幅度降低组件开发的工作量,详情请参见为AstroZero高级页面添加自定义组件

      • 通过组件模板开发

        若全局高级组件中,未包含所需要的组件类型,可以基于低代码平台提供的组件模板进行自定义组件的开发。组件模板中已为您构建组件的基本架构,详情请参见为AstroZero高级页面添加自定义组件

  • 库是支撑高级组件运行的第三方依赖,如果缺少相应的库,则组件不能正常运行。如果高级组件需要使用前端框架或组件库,例如流行的Vue(已预置)、Bootstrap、Element(已预置)等,需要将其制作成库资产,再上传到环境中使用。如何在高级页面中引入库,请参见使用AstroZero开发高级页面时如何引用第三方库

  • 桥接器

    在进行前台页面开发时,经常要调用后台数据,例如购物车中用户的ID、订单编号、商品信息等。这时需要通过桥接器调用后台API,获取后台数据,详情请参见使用桥接器为AstroZero高级页面组件绑定数据

  • 事件和动作

    事件和动作都是组件的配置属性,用于实现组件之间的交互。例如,单击某个组件内的按钮,另外一个组件需要进行数据更新操作,或者是需要跳转到当前应用下的其他高级页面,这时需要通过事件和动作的机制来实现。单击按钮即是触发一个事件,数据更新操作或者页面跳转操作是一个动作,详情请参见添加事件或宏实现AstroZero高级页面组件交互

高级页面多终端适配

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

  • 电脑端和手机端视图

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

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

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

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

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

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

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

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

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

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

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

      图13 绝对布局拉伸设置

      勾选“拉伸”设置后,即可将页面宽度扩展至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的复杂度,通过补充设计的方式逐步丰富布局。这样,通过移动优先,可以更轻松地开发响应式布局。

提示

您即将访问非华为云网站,请注意账号财产安全

文档反馈

文档反馈

意见反馈

0/500

标记内容

同时提交标记内容