华为云ASTRO轻应用-使用华为云Astro轻应用创建高级页面适配多终端显示:期望实现效果

时间：2025-03-03 11:34:58

华为云ASTRO轻应用高级页面专项

期望实现效果

当用户开发的高级页面应用于多种设备时，如何才能保证在不同大小的设备上，能够呈现同样的网页？为此，华为云Astro轻应用提供了高级页面的电脑端和移动端两种终端视图、流式布局的响应式布局，并为绝对布局提供“拉伸”功能辅助自适应。另外，为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式布局设计规范。组件的响应式设计，是高级页面适配多终端的重要前提。下面以开发一个满足响应式布局的商品列表组件为例，向您介绍如何适配多终端。

商品列表组件可以应用于不同分辨率的手机端和电脑端，组件中商品排布能够根据屏幕或者浏览器窗口大小自动调节。如图1中呈现的效果，屏幕或浏览器可视区域由宽变窄过程中，呈现出多终端适配的响应式效果，商品单行个数逐渐由五列变为一列。

图1 商品列表组件的响应式设计