引言

随着终端设备形态日益多样化，应用设计需要考虑界面安全区及避让区的属性，适配不同的屏幕尺寸、屏幕方向和设备类型。HarmonyOS 在设计之初就面向全场景、全设备进行定义，系统整合了手势、基础交互、视效等维度的基础能力，确保不同终端（手机、平板、手表、IoT 设备等）的交互逻辑和视觉风格高度统一，用户无需重复学习，保证体验最优解。

响应式设计在 HarmonyOS 中的应用主要体现在 UI 开发上，目的是确保应用能够在搭载 HarmonyOS 的多种设备上，包括不同屏幕尺寸和分辨率的设备，提供一致且优秀的用户体验。HarmonyOS 为此提供了一系列的响应式布局能力和工具，用来实现多端布局。

响应式布局是基于响应式设计方法论进行布局的方法，核心思想是页面根据不同屏幕尺寸自动调整布局，提供更舒适的界面和更好的用户体验。在鸿蒙应用开发过程中，综合运用断点系统、栅格系统、媒体查询、自适应布局和响应式布局能力，就可以让内容更好地适配显示环境的变化，实现常用页面结构的多设备适配，从而做到一次开发、多端部署。

本文将基于 HarmonyOS 官方关于布局基础、响应式应用架构、响应式布局、页面布局场景、组件布局场景、屏幕类型布局场景、响应式布局方法以及 Web 响应式布局等资料，系统性地介绍如何在鸿蒙应用开发中采用响应式布局，从而实现一次开发多端部署。

一、响应式布局的核心设计原则

响应式布局不是静态固定的，当显示环境发生变化时，如横竖屏切换、调节字体大小、应用分屏，要及时调整内容的布局方式以适应变化。HarmonyOS 提出了以下核心设计原则：

1. 布局完整

设备在折叠/展开或横竖屏切换时，应用窗口的组件、图片、视频等元素应避免出现错位、截断、变形、模糊等问题。布局完整是响应式布局最基本的要求，任何断点变化都不应导致内容缺失或显示异常。

2. 响应式设计

避免使用固定像素来作为界面布局或元素尺寸的定义，对于留白空间可以使用弹性布局或增加 Blank 等组件来实现动态伸缩。配合媒体查询、宽度及高度断点来进行动态判断，尽量使用流式排版来进行布局定义。

3. 移动优先

将应用需要适配的设备类型或断点区间进行汇总，按照最小到最大的比例进行优先级适配，先保证最小屏幕的内容、功能及界面布局完整性后，再逐步向更大比例设备进行延展和功能适配。极端情况下，需要牺牲部分功能体验，确保最小集的完整呈现。

4. 窗口状态感知

在 UX 设计中需要针对不同类型设备，或同一类型设备的不同状态来改变布局样式等。状态感知（媒体查询能力）提供了丰富的媒体特征监听能力，可以监听应用显示区域变化、横竖屏、深浅色、设备类型等等。状态感知为系统底层能力，UX 设计时只需定义在不同场景下对应的设计表现。

根据响应式布局的场景需要，支持以下四种查询类型：

• 设备类型：支持手机、平板、电脑、智慧屏、手表多设备类型查询。在进行多端设计时需要对于一些特殊设备的布局和控件特殊定义，例如智慧屏上的按钮和平板按钮的视觉样式不同，利用设备查询能力能判断当前处于什么设备，以调用对应样式的组件。
• 窗口宽度/高度：支持设备屏幕宽高查询，对于应用窗口支持自由缩放的设备，也支持应用窗口宽高的实时变换监听。屏幕、窗口的宽高查询能力将帮助应用判断当前处于什么断点和栅格，从而判断应用架构和界面布局响应何种变化。
• 折叠屏窗口状态：支持以下折叠屏窗口状态的查询：折叠方式（内外折/上下折）、折痕位置、折叠状态（折叠/开合）、悬停状态（内折悬停/外折悬停）。
• 横竖屏状态：支持横竖屏切换查询。

二、基础单位与网格系统

1. 虚拟像素单位 vp

虚拟像素（virtual pixel）是一台设备针对应用而言所具有的虚拟尺寸（区别于屏幕硬件本身的像素单位）。vp 是灵活的单位，它可在任何屏幕上缩放以具有统一的尺寸体量。它提供了一种灵活的方式来适应不同屏幕密度的显示效果。

使用虚拟像素，可以使 UI 元素在不同密度的设备上具有一致性大小视觉感受。

2. 字体像素单位 fp

字体像素（font pixel）默认情况下与 vp 相同，即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体，字体的实际显示大小就会在 vp 的基础上乘以 scale 系数，即 1 fp = 1 vp * scale。

3. 8vp 网格系统

基于 8vp 为网格的基本单位可以对 UI 界面上元素的大小、位置、对齐方式进行更好的规划，可以构建更有层次感、秩序感，以及多设备上一致的布局效果。一些更小的控件，例如图标大小也可以对齐 4vp 的网格大小。

栅格化布局中的 Margin 和 Gutter 的值参考 8vp/4vp 网格系统设置。例如，手机设备上的栅格化设计，基础栅格 Margin 为 24vp，等于 3 个 8vp 的宽度；卡片栅格 Margin 为 12vp，等于一个 8vp 加上一个 4vp 的宽度。

4. 像素转换

应用开发中，像素之间的转换是非常常见的场景，常见的像素单位如下：

• PX（屏幕像素单位）：px，屏幕上的实际像素，1px 代表手机屏幕上的一个像素点。
• VP（虚拟像素单位）：vp，屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位 vp。vp 与 px 的比例与屏幕像素密度有关。
• FP（字体像素单位）：fp，字体像素大小默认情况下与 vp 相同，即默认情况下 1fp = 1vp。如果用户在设置中选择了更大的字体，字体的实际显示大小就会在 vp 的基础上乘以 scale 系数，即 1fp = 1vp * scale。

常见像素单位之间的转化可以参考 vp2px、px2vp、fp2px、px2fp、lpx2px、px2lpx 等接口。

三、断点系统

断点是响应式布局中最基础也最重要的概念。响应式布局是指页面内的元素可以根据特定的特征（如窗口宽度、屏幕方向等）自动变化以适应外部容器变化的布局能力。响应式布局中最常使用的特征是窗口宽度及窗口高宽比，可以将窗口宽度及窗口高宽比划分为不同的范围，称之为“断点”。当窗口宽度及窗口高宽比从一个断点变化到另一个断点时，改变页面布局（如将页面内容从单列排布调整为双列排布甚至三列排布等）以获得更好的显示效果。

1. 断点的设计原理

提升全场景体验，需考虑多种窗口变化连续性。应用页面布局设计时推荐遵循以下原则：

• 原则一：两个宽度相近的窗口，页面布局应相同，断点归一。
• 原则二：高度相对宽度较小的窗口，呈现横向窗口或类方形窗口时，页面布局进行差异化设计，增加断点。

因此，系统设计了横向和纵向断点分别代表窗口的不同特征，作为判断页面布局和交互体验的条件：

• 横向断点以窗口宽度值区分，代表窗口宽度实际大小，会影响用户使用和观看的物理尺寸。
• 纵向断点以窗口高宽比区分，代表窗口相对高度，表示横向比例、方形或纵向比例窗口。

2. 断点的定义

横向断点以应用窗口宽度为判断条件，建议划分为如下几个区间：

断点名称	窗口宽度（vp）
xs	(0, 320)
sm	[320, 600)
md	[600, 840)
lg	[840, 1440)
xl	[1440, +∞)

纵向断点根据应用窗口的高宽比进行判断，建议划分为如下几个区间：

断点名称	高宽比
sm	(0, 0.8)
md	[0.8, 1.2)
lg	[1.2, +∞)

3. 常用设备断点区间

当前 HarmonyOS 主流设备窗口全屏时尺寸和横纵断点区间如下表所示：

产品类型	常见产品型号	窗口全屏时尺寸（以产品型号第一款举例，单位为 vp）	横向断点	纵向断点
手机（竖屏/反向竖屏）	Mate60、Mate60 Pro、Mate70、Mate70 Pro、Pura70、Pura70 Pro、Pura80、Pura80 Pro	827 * 374	sm	lg
阔折叠	Pura X	内屏（竖屏/反向竖屏）：707 * 440；外屏（反向横屏）：326 * 326	内屏：sm；外屏：sm	内屏：lg；外屏：md
阔折叠	Pura X Max	内屏（横屏/反向横屏）：939 * 664；外屏（竖屏）：459 * 672	内屏：lg；外屏：sm	内屏：sm；外屏：lg
小折叠	Pocket 2	内屏（竖屏/反向竖屏）：860 * 364	sm	lg
双折叠	Mate X5、Mate X6	内屏（竖屏/反向竖屏）：798 * 711；外屏（竖屏/反向竖屏）：801 * 345	内屏：md；外屏：sm	内屏：md；外屏：lg
三折叠	Mate XT	F态（单屏显示）：776 * 350；M态（双屏显示）：776 * 712；G态（三屏显示）：1107 * 776	F态：sm；M态：md；G态：lg	F态：lg；M态：md；G态：sm
平板（横屏/反向横屏）	MatePad、MatePad Pro	1137 * 711	lg	sm
电脑	MateBook Pro（横屏）	1642 * 1094	xl	sm
电脑	MateBook Fold（展开态横屏）	1831 * 1307	xl	sm
智慧屏	Mate TV	1280 * 720	lg	sm

4. 通过断点刷新 UI

（1）通过断点环境变量刷新 UI

从 API version 22 起，开发者可利用响应式系统环境变量装饰器 @Env 读取断点信息。当组件所在窗口尺寸发生变化时，@Env 装饰的断点环境变量将更新，并触发与该断点环境变量关联的组件刷新，从而实现界面内容的同步更新。

获取 @Component/@ComponentV2 所在窗口的环境变量信息后，当窗口尺寸变化时，断点环境变量将根据新的窗口尺寸更新，并触发相关 UI 组件的刷新。常见场景包括：

• 通过 BuilderNode 切换窗口后，触发断点环境变量重新获取断点信息。
• 横竖屏或折叠状态切换时，窗口的横纵向断点刷新，断点环境变量将同步更新。

（2）通过主动监听断点变化刷新 UI

使用自定义窗口信息类 WindowInfo 保存窗口断点信息，在 WindowUtil 类中创建窗口信息类对象，使用 getWindowWidthBreakpoint() 与 getWindowHeightBreakpoint() 获取当前窗口横向断点与纵向断点。通过 on(‘windowSizeChange’) 开启窗口尺寸变化的监听，并在监听回调中重新获取断点。在 EntryAbility 的 onWindowStageCreate() 生命周期中，获取应用窗口实例，对 WindowUtil 进行初始化操作，并保存至 AppStorage 中。完成上述步骤后，当窗口尺寸发生变化时，更新横纵断点。

5. 横向断点的使用案例

针对布局拉通（两个宽度相近的窗口，页面布局应保持一致），实现多设备应用时，首先根据不同设备类型对应的横向断点集合，规划多种设计方案。例如，应用需要支持手机、双折叠（Mate X 系列）和平板，需要考虑的三个横向断点分别是 sm、md 和 lg，并设计相应页面布局。

在实际应用开发中，可以设计工具类 WidthBreakpointType，覆盖不同横向断点下的成员变量，从而实现具体的响应式布局。例如在 sm、md、lg 横向断点下，字体大小分别为 14fp、16fp、18fp，通过工具类为属性赋值；或者使用三元表达式结合横向断点为属性赋值。

6. 纵向断点的使用案例

针对高度相对宽度较小的窗口（如横向窗口或类方形窗口），系统推荐以下方式判断横向窗口或类方形窗口，并展示特殊页面布局：

• 横向窗口：纵向断点为 sm 或窗口高宽比小于 0.8。
• 类方形窗口：纵向断点为 md 或窗口高宽比在 [0.8, 1.2) 之间。

（1）独特的小窗口布局

为了提供独特的用户体验，类方形小窗口设计为独特布局。常见场景为手机上下 1:1 分屏或小方形屏（如 Pura X 系列产品的外屏），可使用横向断点为 sm，纵向断点为 md 进行区分。

（2）其他特殊场景

在开发过程中存在特殊场景，仅使用横向断点无法区分，需要结合横向断点和纵向断点进行判断。例如视频类应用的全屏播放页，在手机横屏时，不支持旋转；在双折叠展开态和平板竖屏时，支持旋转。由于这三种场景的横向断点都在 md 范围内，无法区分，因此需要结合横向断点和纵向断点进行区分，以兼容多种设备的全屏播放窗口旋转方案。

通过纵向和横向断点替换之前的逻辑，开发者只需维护一套方案，即可实现“全屏播放”页在多设备上的兼容。在实际开发中，多设备兼容均可采用此方案进行适配。

四、媒体查询

在实际应用开发过程中，开发者常常需要针对不同类型设备或同一类型设备的不同状态来修改应用的样式。媒体查询提供了丰富的媒体特征监听能力，可以监听应用显示区域变化、横竖屏、深浅色、设备类型等，因此在应用开发过程中使用得非常广泛。

媒体查询跟断点的结合，即借助媒体查询能力，监听断点的变化。通过媒体查询，可以监听应用窗口宽度变化，获取当前应用所处的断点值。

例如，可以对通过媒体查询监听断点的功能做简单的封装，方便后续使用。在页面中，通过媒体查询监听应用窗口宽度变化，获取当前应用所处的断点值，并根据断点值动态设置图片资源和文字内容。

媒体查询的主要特征包括：

• 监听应用窗口宽度变化。
• 监听横竖屏状态。
• 监听深浅色模式。
• 监听设备类型。

通过媒体查询能力，开发者可以在不同断点下使用不同的样式表现，实现响应式布局。

五、栅格系统

栅格系统是一个多设备下通用的辅助定位系统，栅格给布局提供一种可循的规律，解决多尺寸多设备的动态布局问题。保证各模块各设备的布局一致性。栅格会跟随屏幕尺寸、窗口尺寸、子容器尺寸的变化而动态变化。

1. 栅格构成

栅格系统有 Margins（边距）、Gutters（间距）、Columns（栅格）三个属性。

• Margins（边距）：Margin 是元素相对窗口左右边缘的距离，决定了内容可展示的整体宽度，是用来控制元素距离屏幕最边缘的距离关系，可以根据不同的窗口容器尺寸定义不同的 Margin 值。
• Gutters（间距）：Gutter 是每个 Column 的间距，控制元素和元素之间的距离关系，决定内容间的紧密程度，可以根据不同的窗口容器尺寸定义不同的 Gutters 值，为了保证较好的视觉效果，Gutters 通常的取值不会大于 Margins 的取值。
• Columns（栅格）：Column 是内容的占位元素，其数量决定了内容的布局复杂度，Columns 的宽度在保证 Margins 和 Gutters 符合规范的情况下，根据实际窗口的宽度和 Columns 数量自动计算每一个 Columns 的宽度。不同的窗口容器尺寸匹配不同的 Columns 数量来辅助布局定位。

2. 窗口栅格

窗口栅格系统是系统提供的一种面向多设备高效适配的辅助布局的定位工具。系统将根据窗口容器的水平宽度自动匹配最佳的栅格数量，以达到内容布局的最佳适应。

• 0 <= 水平 vp < 600 时：4 Columns 栅格；
• 600 <= 水平 vp < 840 时：8 Columns 栅格；
• 840 <= 水平 vp 时：12 Columns 栅格。

3. 栅格参数

各类设备的栅格数、Margin、Gutter 的参数如下表所示：

参数项	手机	折叠屏	平板	车机	智慧屏
竖屏栅格数（个）	4	8	8	-	-
横屏栅格数（个）	8	8	12	12	12
基础栅格 Margin（vp）	24	24	24	24	48
基础栅格 Gutter（vp）	24	24	24	24	24
卡片栅格 Margin（vp）	12	12	12	12	48
卡片栅格 Gutter（vp）	12	12	12	12	24

栅格最大使用宽度为 2220vp，当窗口不断拉宽大于 2220vp 时，栅格内的内容区范围不再变化，多出的区域左右留白。

4. 栅格组件 GridRow 和 GridCol

ArkUI 在 API version 9 对栅格组件做了重构，推出了新的栅格组件 GridRow 和 GridCol，同时原有的 GridContainer 组件及栅格设置已经废弃。栅格布局就是栅格结合了断点，实现栅格布局能力的组件叫栅格组件。在实际使用场景中，可以根据需要配置不同断点下栅格组件中元素占据的列数，同时也可以调整 Margin、Gutter、Columns 的取值，从而实现不同的布局效果。

（1）栅格组件的断点

栅格组件提供了丰富的断点定制能力：

• 开发者可以修改断点的取值范围，支持启用最多 6 个断点。基于推荐值，栅格组件默认提供 xs、sm、md、lg 四个断点，还支持开发者启用 xl 和 xxl 两个额外的断点。
• 栅格断点默认以窗口宽度为参照物，同时还允许开发者配置为以栅格组件本身的宽度为参照物。栅格既可以用于页面整体布局的场景，也可以用于页面局部布局的场景。
• 栅格组件的断点发生变化时，会通过 onBreakPointChange 事件通知开发者。

（2）栅格组件的 columns、gutter 和 margin

栅格组件 columns 默认为 12 列，gutter 默认为 0，同时支持开发者根据实际需要定义不同断点下的 columns 数量以及 gutter 长度。栅格组件还允许开发者分别定义水平方向的 gutter（相邻两列之间的间距）和垂直方向的 gutter（折行时相邻两行之间的间距）。

栅格组件不再单独提供额外的 margin 属性，直接使用通用属性即可。借助 margin 或者 padding 属性，均可以控制栅格组件与父容器左右边缘的距离。margin 区域在栅格组件的边界外，padding 区域在栅格组件的边界内；栅格组件的 backgroundColor 会影响 padding 区域，但不会影响 margin 区域。

（3）栅格组件的 span、offset 和 order

栅格组件（GridRow）的直接孩子节点只可以是栅格子组件（GridCol），GridCol 组件支持配置 span、offset 和 order 三个参数。这三个参数的取值按照 “xs -> sm -> md -> lg -> xl -> xxl” 的向后方向具有继承性（不支持向前方向的继承性）。

• span：在栅格中占据的列数。span 为 0，意味着该元素既不参与布局计算，也不会被渲染。
• offset：相对于前一个栅格子组件偏移的列数。
• order：元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。

六、响应式组件

HarmonyOS 的 ArkUI 框架基于声明式 UI 范式，提供了一套响应式组件体系。该体系通过断点机制与组件的属性绑定对应关系，使开发者能够为不同窗口尺寸区间预定义差异化的布局参数（如 columns/span）和样式表现（如字体大小/边距）。当检测到窗口尺寸跨越断点时，触发组件实例的布局重计算和样式切换，实现从手机竖屏到横屏、折叠屏折叠状态切换以及窗口分屏等场景布局转换的实时适配，实现“一次开发，多端部署”的全景体验。

ArkUI 框架常用的响应式组件及能够实现的布局场景的对应关系如下表：

响应式组件	布局场景	响应式布局方式
List	重复列表	重复布局
WaterFlow	重复瀑布流	重复布局
Swiper	重复轮播视图	重复布局
Grid	重复网格	重复布局
SideBarContainer	侧边栏	分栏布局
Navigation	单/双栏	分栏布局
Navigation+SideBarContainer	三分栏	分栏布局
Tabs	底部/侧边导航	挪移布局
GridRow/GridCol	插图和文字组合、单列列表	挪移布局、缩进布局

常用响应式组件的属性

1. List

• lanes：设置不同断点对应 list 组件布局的列数或行数，及列间距。

2. WaterFlow

• WaterFlowLayoutMode：优先考虑视窗内布局信息或涉及动态切换列数时，建议使用 SLIDING_WINDOW 模式。
• columnsTemplate：设置不同断点下瀑布流布局的列数。
• columnsGap：设置不同断点下列间距。
• itemConstraintSize：设置不同断点下 WaterFlow 所有子组件的约束尺寸。

3. Swiper

• index：设置不同断点下默认展示的子组件索引值。
• indicator：设置不同断点下是否显示导航点指示器和不同样式。
• displayCount：设置不同断点下 Swiper 视窗内元素显示的个数。
• nextMargin：设置不同断点下的后边距，用于露出后一项的一小部分。
• prevMargin：设置不同断点下的前边距，用于露出前一项的一小部分。
• onChange()：根据不同断点，设置索引值。

4. Grid

• columnsTemplate：设置不同断点下网格布局列的数量。
• rowsTemplate：设置不同断点下网格布局行的数量。
• columnsGap：设置不同断点下的列间距。
• rowsGap：设置不同断点下的行间距。

5. SideBarContainer

• showSideBar：设置不同断点下侧边栏是否默认显示。
• SideBarContainerType：设置不同断点下容器内侧边栏样式。
• sideBarWidth：设置不同断点下侧边栏的宽度。
• minSideBarWidth：设置不同断点下侧边栏最小宽度。
• maxSideBarWidth：设置不同断点下侧边栏最大宽度。

6. Navigation

• mode：设置不同断点下导航栏的显示模式：单栏或双栏。
• navBarWidth：设置不同断点下导航栏的宽度。

7. Tabs

• vertical：设置不同断点下 Tabs 为横向或纵向。
• barPosition：设置不同断点下 Tabs 的页签位置。
• barMode：设置不同断点下 TabBar 的布局模式，以及 Scrollable 模式下 TabBar 的布局样式。
• barWidth：设置不同断点下 TabBar 的宽度。
• barHeight：设置不同断点下 TabBar 的高度。

8. GridRow/GridCol

• GridRow 属性：columns 设置不同断点下栅格容器划分的布局列数；breakpoints 设置断点的划分阈值与横向断点一致。
• GridCol 属性：span 设置不同断点下栅格子组件的占用列数；offset 设置不同断点下栅格子组件的偏移列数；order 设置不同断点下栅格子组件的序号。

七、响应式布局样式

当基本的自适应布局无法满足多终端上屏幕的体验要求时，我们需要针对不同终端的屏幕特点进行响应式的布局。常见的响应式布局样式有：分栏布局、重复布局、挪移布局和缩进布局。

1. 分栏布局

分栏布局是利用屏幕的宽度优势，将有上下级层级的界面同时左右显示。当同时满足水平 vp 大于等于 600 时，可以响应分栏布局。例如设置首页及设置详情页，当横向 vp 大于等于 600vp 时，显示分栏布局。

2. 重复布局

重复布局是利用屏幕的宽度优势，将相同属性的组件横向并列排布。重复布局适用于对宽高比敏感的图片和组合内容，当内容放大以后导致原图放大超过 150% 的场景。

3. 挪移布局

挪移布局是利用屏幕的宽度优势，将原先的上下布局切换成左右布局。挪移布局适用于横竖屏切换，以及类似的宽高比明显变化（大于 200%），同时希望保证内容完整的场景。例如上下布局的插画和文字，横屏后左右布局。

4. 缩进布局

缩进布局是为了在宽屏上内容显示有更好的效果，在不同宽度的设备上进行不同缩进效果。缩进布局适用于纯段落文本/上图下段落文本/卡片的布局结构的场景，在其对应的栅格规格下，缩进的规则占用栅格数量进行布局。当栅格为 8 columns 或 12 columns 时可以使用 6 columns 和 8 columns 的缩进布局。

5. 其他响应式布局方法

除了上述四种布局方式，HarmonyOS 还提供了以下布局方法，在面向多端应用设计过程中不同的方法可以叠加使用：

• 自适应拉伸：左右拉伸、均分拉伸。
• 自适应缩放：等比缩放、占比缩放。
• 自适应延伸：自适应延伸、自适应隐藏。
• 自适应折行：容器组件尺寸发生变化，当布局方向尺寸不足以显示完整内容时自动换行。

八、页面布局场景

HarmonyOS 基于“一次开发，多端部署”的理念设计了响应式布局，旨在帮助开发者高效构建适应不同设备的应用界面。系统通过统一的 UI 框架、响应式布局能力——断点和栅格，让应用页面能够根据代码的差异化实现自动适应从手机、折叠屏、平板到电脑等各种终端形态。

响应式布局方式包含四种：重复布局、分栏布局、挪移布局和缩进布局。下面从页面布局场景的角度，通过典型布局场景的示例，展示不同横向断点下界面的展示效果，并详细说明在多设备上的实现方案。主要覆盖手机、折叠屏、平板和电脑设备。

1. 重复布局

重复布局是指在空间充足时，重复使用相同或相似的结构、组件或排列方式，用以展示更多内容、保持视觉一致性并提高用户体验。常用的重复布局包括列表布局、瀑布流布局、轮播布局和网格布局。

（1）列表布局

列表布局基于横向断点，动态调整列数以实现重复布局。

横向断点	sm	md	lg
属性	单列列表，行间距 8vp	双列列表，列间距 12vp，行间距 12vp	三列列表，列间距 12vp，行间距 16vp

实现方案：设置不同横向断点下，List 组件的 lanes、space 属性实现目标效果。

（2）瀑布流布局

瀑布流布局基于横向断点，动态控制列数以实现重复布局。

横向断点	sm	md	lg
属性	双列布局	三列布局	四列布局

实现方案：设置不同横向断点下，WaterFlow 组件的 columnsTemplate 属性实现目标效果。

（3）轮播布局

轮播布局基于横向断点，动态控制视窗内显示元素的个数以实现重复布局。

横向断点	sm	md	lg
属性	展示一个元素，无前后边距，显示圆点指示器	展示两个元素，前后边距 12vp，不显示圆点指示器	展示三个元素，前后边距 64vp，不显示圆点指示器

实现方案：设置不同横向断点下，Swiper 组件的 displayCount、prevMargin、nextMargin 和 indicator 属性实现目标效果。

（4）网格布局

网格布局基于横向断点，动态控制列数/行数以实现重复布局。

横向断点	sm	md	lg
属性	网格 2 行 2 列	网格 2 行 3 列	网格 2 行 4 列

实现方案：设置不同横向断点下，Grid 组件的 columnsTemplate 属性实现目标效果。在不设置 Grid 组件行数的情况下，行数 = 展示元素数量 / 列数。

2. 分栏布局

分栏布局是指在空间充足时，将窗口划分为两栏或三栏，用于展示多类内容。常见的分栏布局包括侧边栏、单/双栏和三分栏。

（1）侧边栏

侧边栏基于横向断点，动态控制侧边栏是否显示，实现二分栏布局。

横向断点	sm	md	lg
属性	默认不显示侧边栏，侧边栏浮在内容区上，侧边栏宽度 80%	默认显示侧边栏，侧边栏和内容区并列展示，侧边栏宽度 50%	默认显示侧边栏，侧边栏和内容区并列展示，侧边栏宽度 40%

实现方案：在不同横向断点下，动态控制 SideBarContainer 组件的 showSideBar 和 sideBarWidth 属性实现目标效果。

（2）单栏与双栏

单/双栏基于横向断点，动态控制导航栏的显示模式，实现二分栏布局。

横向断点	sm	md	lg
属性	导航栏和内容区单栏显示	当设备宽度≥600vp，高宽比<1.2 时，导航栏和内容区分栏显示，导航栏与内容区推荐比例 1:1	当设备宽度≥600vp，高宽比<1.2 时，导航栏和内容区分栏显示，导航栏与内容区推荐比例 1:2

实现方案：设置不同横向断点下，Navigation 组件的 mode 属性实现目标效果。

（3）三分栏

三分栏基于横向断点，动态控制导航栏的显示模式和侧边栏是否显示，实现三分栏布局。

横向断点	sm	md	lg
属性	默认不显示侧边栏，侧边栏覆盖导航栏，侧边栏宽度 80%，导航栏和内容区单栏显示	默认不显示侧边栏，侧边栏覆盖导航栏，侧边栏宽度 50%，导航栏和内容区分栏显示	默认显示侧边栏，侧边栏嵌入导航栏，侧边栏宽度 20%，导航栏和内容区分栏显示

实现方案：在不同横向断点下，动态控制 SideBarContainer 组件的 showSideBar、sideBarWidth 属性，和 Navigation 组件的 mode、navBarWidth 属性实现目标效果。

3. 挪移布局

挪移布局是指在空间充足时，通过调整组件的位置与展示方式，在左右布局与上下布局之间切换，用以展示更多内容或提高用户体验。常用的挪移布局包括插图和文字组合布局、底部/侧边导航。

（1）插图和文字组合布局

插图和文字组合布局基于横向断点，设置组件所占不同的栅格数，实现左右布局与上下布局的切换。

横向断点	sm	md	lg
属性	整个窗口划分为 4 栅格，歌单封面区占 4 栅格，歌曲列表区占 4 栅格	整个窗口划分为 8 栅格，歌单封面区占 4 栅格，歌曲列表区占 4 栅格	整个窗口划分为 12 栅格，歌单封面区占 4 栅格，歌曲列表区占 8 栅格

实现方案：设置不同横向断点下，GridRow 组件的 columns、breakpoints 属性，和 GridCol 组件的 span 属性实现目标效果。

（2）底部/侧边导航

底部/侧边导航基于横向断点，设置导航栏的位置与方向，实现上下布局与左右布局的切换。当前系统支持手机、折叠屏、平板和电脑四种产品形态，分别对应 sm、md、lg 和 xl 四个断点。

横向断点	sm	md	lg	xl
属性	分级导航由底部一级导航栏和顶部二级页签组成	分级导航由底部一级导航栏和顶部二级页签组成	分级导航由侧边一级导航栏和顶部二级页签组成	通过侧边栏显示一级和二级导航

实现方案：设置不同横向断点下，Tabs 组件的 barPosition、vertical、barHeight、barWidth 和 barMode 属性实现目标效果。

4. 缩进布局

缩进布局是指在空间充足时，组件居中展示并在两侧留白，通过调整内容的缩进来建立视觉层次结构，提高可读性和美观性。常用的缩进布局包括单列列表布局。

单列列表布局基于横向断点，设置栅格子组件所占的栅格列数和偏移列数，实现缩进布局。

横向断点	sm	md	lg
属性	整个窗口划分为 4 栅格，单列列表占 4 列，偏移 0 列	整个窗口划分为 8 栅格，单列列表占 6 列，两侧各偏移 1 列	整个窗口划分为 12 栅格，单列列表占 8 列，两侧各偏移 2 列

实现方案：设置不同横向断点下，GridRow 组件的 columns、breakpoints 属性和 GridCol 组件的 span、offset 属性实现目标效果。

九、组件布局场景

1. List 组件

List 组件通过 lanes 属性实现重复列表布局。在不同断点下，设置 lanes 为不同值，可以控制列表的列数。例如在 sm 断点下为单列，md 断点下为双列，lg 断点下为三列。

2. WaterFlow 组件

WaterFlow 组件通过 columnsTemplate 属性控制瀑布流列数。在 sm 断点下双列，md 断点下三列，lg 断点下四列。

3. Swiper 组件

Swiper 组件通过 displayCount、prevMargin、nextMargin 和 indicator 属性实现轮播布局。在 sm 断点下显示 1 个元素并显示指示器，在 md 和 lg 断点下显示 2 个或 3 个元素并隐藏指示器。

4. Grid 组件

Grid 组件通过 columnsTemplate 和 rowsTemplate 属性实现重复网格布局。在不同断点下设置不同列数，例如 sm 断点 2 列，md 断点 3 列，lg 断点 4 列。

5. SideBarContainer 组件

SideBarContainer 组件通过 showSideBar、SideBarContainerType 和 sideBarWidth 属性实现侧边栏布局。在 sm 断点下默认隐藏侧边栏，使用 Overlay 模式；在 md 和 lg 断点下默认显示侧边栏，使用 Embed 模式。

6. Navigation 组件

Navigation 组件通过 mode 和 navBarWidth 属性实现单/双栏布局。在 sm 断点下使用 Stack 模式单栏显示；在 md 和 lg 断点下使用 Split 模式分栏显示。

7. SideBarContainer+Navigation 组合

通过组合 SideBarContainer 和 Navigation 组件可以实现三分栏布局。在 lg 断点下显示侧边栏并使用双栏模式，在 md 断点下侧边栏覆盖导航栏并使用双栏模式，在 sm 断点下使用单栏模式且侧边栏覆盖显示。

8. Tabs 组件

Tabs 组件通过 vertical、barPosition、barMode、barWidth 和 barHeight 属性实现底部/侧边导航布局。在 sm 和 md 断点下使用底部导航，lg 断点下使用侧边导航，xl 断点下使用侧边栏显示多级导航。

9. GridRow/GridCol 组件

GridRow/GridCol 组件通过 columns、breakpoints、span、offset 和 order 属性实现挪移布局和缩进布局。插图与文字组合布局在 sm 断点上下排列，在 md 和 lg 断点左右排列；单列列表布局通过设置不同的 span 和 offset 实现缩进。

十、屏幕类型布局场景

通过分析不同设备之间的差异，每一种屏幕形态都有其独特的应用场景和设计考量。本文从屏幕形态的角度深入探讨以下八种类别：超大屏横屏、大屏横屏、大屏竖屏、大方形屏、直板机竖屏、直板机横屏、小方形屏、圆形屏。

1. 超大屏横屏

超大屏横屏设备横向分辨率通常超过 1440vp，具备更强的多任务处理能力，可同时展示多个应用或复杂布局，提升工作效率。典型设备为 PC/2in1，横向断点 xl，纵向断点 sm。

布局设计与实现：

• 导航栏：当应用窗口宽度达到或超过 1440vp，即横向断点为 xl 时，建议采用挪移布局，将底部导航栏变更为侧边分级导航栏。使用 SideBarContainer 组件实现侧边栏效果。
• 网格：建议采用重复布局，结合网格实现结构化与多样化的排布方式。网格布局通过 Grid 组件实现，在不同断点下设置不同的列数和行数。
• 列表：为了提高屏幕利用率，在大屏上展示更多的内容信息，可以根据断点展示更多列数实现重复布局。List 组件提供 lanes 属性，支持设置布局列数或行数。
• 三分栏：在超大屏横屏设备上，面对具有多级属性的内容，建议采用分栏布局，组合使用 Navigation 组件和 SideBarContainer 组件实现。

2. 大屏横屏

大屏横屏的特点主要表现为横向分辨率超过 840vp，提供更宽广的显示视野和更强的信息承载能力。典型设备有 Pad、三折叠三屏态等，横向断点 lg，纵向断点 sm。

布局设计与实现：

• 导航栏：当应用窗口宽度达到或超过 840vp，横向断点为 lg 时，建议采用挪移布局，将底部导航栏变更为侧边导航栏。导航页签使用 Tabs 组件实现，窗口为 lg 断点时，页签位于页面左侧，此时 vertical=true，barPosition=Start。
• 瀑布流：建议采用响应式布局策略，将小尺寸屏幕上的全屏内容，在宽屏设备上自动切换为瀑布流布局，通过重复布局实现更多内容的可视化呈现。WaterFlow 组件提供 columnsTemplate 属性。
• 轮播图：多张图片展示的场景下，建议使用轮播图展示图片，采用重复布局的方式。通过 Swiper 组件的 displayCount 属性设置视窗内图片显示的个数。
• 网格：建议采用重复布局，根据不同设备的显示特性自动调整列数、间距与排列方向。通过 Grid 组件实现。
• 列表：建议采用重复布局，List 组件提供 lanes 属性，支持设置布局列数或行数。
• 侧边栏：为充分发挥大屏设备在空间展示上的优势，建议采用分栏布局，合理划分主内容区与侧边栏区域。使用 SideBarContainer 组件展示侧边栏，在 lg 断点下设置 showSideBar 为 true。
• 三分栏：当应用页面包含层级关系，建议使用分栏布局，实现三分栏的效果。组合使用 SideBarContainer 与 Navigation 组件。
• 插图和文字组合布局：推荐采用挪移布局，将图片与文字设置为左右分布的形式。借助栅格组件 GridRow 和 GridCol 实现。

3. 大屏竖屏

大屏竖屏是指原本设计为横屏使用的大屏幕设备在垂直方向上的展示形态，典型设备有 Pad（竖屏）、三折叠三屏态（竖屏），横向断点 md，纵向断点 lg。

布局设计与实现：

• 导航栏：大屏竖屏设备推荐将页签栏布局在底部，提升核心功能的可访问性与操作效率。设置 Tabs 组件的 barPosition 为 End、vertical 为 false。
• 轮播图：在大屏竖屏场景下，由于屏幕宽度较大，推荐采用重复布局，多张图片轮播，通过 Swiper 组件的 displayCount 属性实现多个轮播项的同时展示。
• 列表：大屏竖屏相较于直板机竖屏具有更大的展示内容区，建议采用重复布局，设置为一行多列或一列多行展示。List 组件提供 lanes 属性。
• 网格：大屏竖屏支持设置布局为多行多列展示，通过 Grid 组件实现。

4. 大方形屏

大方形屏幕的特点包括：屏幕比例为 1:1，横向分辨率超过 600vp，具备较高的信息承载能力和良好的阅读舒适度。典型设备如华为 Mate X 系列在展开状态下的屏幕形态，横向断点 md，纵向断点 md。

布局设计与实现：

• 导航栏：对于 md 断点的大方形屏幕，推荐页签栏位于底部，图标与文字水平排列，页签宽度平均分配，页签高度固定为 56vp。设置 Tabs 组件的 barPosition 为 End、vertical 为 false。
• 瀑布流：小尺寸屏幕上的单列瀑布流，在大方形屏上采用重复布局，变为多列瀑布流布局。WaterFlow 组件提供 columnsTemplate 属性。
• 网格：大方形屏推荐使用重复布局，以多行多列的形式展示重复性信息元素。使用 Grid 组件实现。
• 列表：建议使用重复布局，通过“一行多列”或“一列多行”的排布方式展示更多内容。List 组件提供 lanes 属性。
• 双栏：大方形屏建议采用分栏布局，利用横向空间优势，清晰展示具有层级关系的内容。将 Navigation 的 mode 属性设置为 Auto，可以自动实现单/双栏的切换。
• 侧边栏：在需要展示更多信息时，建议采用分栏布局，添加侧边栏。使用 SideBarContainer 组件，动态设置 showSideBar 为 true。
• 插图和文字组合布局：在部分小屏上下显示的场景，大方形屏时推荐采用挪移布局，左右分布。通过响应式布局能力结合 Grid 组件实现。

5. 直板机竖屏

直板机竖屏是手机的主流屏幕类型，展示区域适中，适合单手操作和日常信息浏览。典型设备有华为全系列的直板机（如 Mate 60）、小折叠（展开态）、阔折叠等，横向断点 sm，纵向断点 lg。

布局设计与实现：

• 导航栏：建议使用底部页签栏布局，方便用户快速切换功能模块。设置 Tabs 组件的 barPosition 为 End、vertical 为 false。
• 瀑布流：推荐使用重复布局，提升内容展示密度与滚动浏览体验。WaterFlow 组件提供 columnsTemplate 属性。
• 插图和文字组合布局：推荐使用上下布局，按内容优先级从上至下排列，适配小屏显示需求。借助栅格组件 GridRow 和 GridCol 实现。
• 单栏：推荐使用单栏布局，按内容顺序垂直排列。通过设置 Navigation 组件的 mode 属性为 Stack 实现。

6. 直板机横屏

直板机横屏的主要使用场景通常是竖屏设备旋转至横屏后的情况，典型设备有华为全系列的直板机（如 Mate 60）、小折叠（展开态）等，横向断点 md，纵向断点 sm。

布局设计与实现：

• 网格：推荐使用重复布局，利用较宽的显示区域横向展示更多内容。使用 Grid 组件实现多行多列布局效果。
• 插图与文字组合布局：推荐采用挪移布局，将图片与文字左右排列。使用 GridRow/GridCol 实现。
• 双栏：推荐使用分栏布局，将界面划分为左右两部分。使用 Navigation 组件，设置 mode 为 Auto；或者使用 SideBarContainer 组件，设置 showSideBar 为 true。

7. 小方形屏

小方形屏的特点包括：屏幕比例为 1:1，横向分辨率低于 600vp，典型设备如华为推出的 Pura X 系列产品的外屏，横向断点 sm，纵向断点 md。

布局设计与实现：

• 页面支持滑动、完整显示：小方形屏展示内容建议要考虑完整性展示，推荐使用 Scroll 组件实现页面支持滑动。
• 短视频播放页面完整显示，侧边控件支持滑动：背景图片（视频）需等比例缩放并上下沉浸，上方沉浸至顶部标题栏，下方沉浸至底部页签栏。侧边控件支持滑动，确保页面内容完整显示。使用 Stack 组件控制页面内容显示层级，使用 Blank 组件和 displayPriority 属性控制侧边控件区上下两侧的留白，容器高度足够时上下留白，容器高度不足时自动隐藏。
• 自定义弹窗适配小方形屏：当窗口高度无法完整显示自定义弹窗时，弹框内容区使用 Scroll 组件包裹，且使用 constraintSize 约束其高度最大不超过父组件的 90%，避免弹框内容截断。
• 沉浸式浏览：建议使用上滑隐藏、下滑恢复显示的功能。上滑可以临时隐藏标题栏、页签栏等界面元素，实现全屏内容浏览。下滑时，标题栏和页签栏将通过动画逐渐恢复显示。监听滚动行为，滚动时动态调整页面组件的高度和透明度。

8. 圆形屏

典型配备圆形屏幕的设备包括手表等可穿戴装置，其主要特点为即时通知和轻量级交互，横向断点 xs，纵向断点 sm。

布局设计与实现：

• 当显示的内容量超过单屏范围时，建议采用横向切屏和垂直切屏的布局策略。横向切屏可沿水平方向分布内容，垂直切屏允许信息在垂直方向扩展。
• ArkUI 为圆形屏幕提供了部分弧形组件，建议开发者优先使用这些适配组件进行智能手表界面的开发。组件包括 ArcList、ArcButton、ArcSlider、ArcScrollBar、ArcAlphabetIndexer、ArcSwiper、ArcListItem 等。
• 需要在设计手表页面时给表页面最外层容器添加 borderRadius 属性，并为其设置一个 50% 大小的圆角。
• 内容通常需要居中，保证在圆表屏幕下能够正常显示。
• 建议使用手表特有组件 ArcSwiper 组件，实现手表上页面滑动切换的效果。

十一、系统安全区

安全区定义了界面可完整显示的区域，确保在安全区内的内容不会被硬件挖孔、圆角等因素截断或遮盖。

1. 手机

基于默认布局规则，手机上需避让顶部信号栏、底部导航条安全区、与两侧 margin，有需要时预留键盘占据的空间，考虑安全区的嵌入后能最大化信息的展示效率，使用户感知到应用界面为一个整体。

当屏幕中包含多个窗口时，如图示窗口高度比例 2:1、1:1、与存在悬浮窗的场景，用户难以看清靠近边缘的内容，应考虑在窗口内居中放置主要内容，并避免过于紧凑的界面布局。

2. 折叠设备

除顶部信号栏与底部导航条以外，需避免将关键信息放置在折叠设备的转轴区（即折痕处），便于悬停态适配。

折叠设备呈展开态并存在多个窗口时，需考虑分屏布局，使关键信息易识别，核心操作易于使用。

3. 平板

平板基础布局需避让顶部信号栏、底部导航条安全区、与两侧 margin（根据断点规则计算）。平板布局应额外考虑横排状态下窗口宽度比例 1:2、1:1、与 2:1 分屏浏览的情况。

4. 智能穿戴

智能穿戴产品的信息布局需要根据设备为圆表或方表，以及当前应用的实际内容进行设计。避让水平屏幕边缘间距的同时，在不同的界面架构中，需要考量垂直布局额外进行避让。

十二、响应式应用架构

响应式布局方法也用于应用导航，当应用窗口发生变化时，应用导航方式也会随着窗口达到对应断点值而发生变化，通过导航方式的调整提高交互的易用性。

1. 侧边 Tab

当窗口宽度达到对应的断点值，底部 Tab 可以结合挪移布局的方法，把 Tab 组件挪移到左侧。在大尺寸设备上提高交互易用性。

适用于导航结构简单的内容型应用，例如音乐、视频等。窗口宽度 ≥ 840vp，建议使用侧边 Tab，侧边 Tab 的导航选项继承底部 Tab。

2. 分栏

当窗口宽度达到对应的断点值，原来父子关系的层级页面可拆分后平行显示，在大尺寸设备上充分发挥屏幕的显示优势，例如设置、短信等。

窗口宽度 ≥ 600vp，建议使用分栏布局。默认两栏宽度比例为 4:6，特定场景下可支持配置为 5:5 或 6:4。

3. 侧边导航栏

侧边导航栏是大屏设备上常用的一种导航方式，使用侧边导航栏，通过切换导航页签或入口提高操作效率。

• 底部 Tab 切换侧边导航栏：窗口宽度≥840 底部 Tab 可切换为侧边导航栏，默认侧边导航栏在窗口容器内嵌入显示。底部 Tab 可切换为侧边导航栏必须针对导航栏做一定的拓展，例如拓展导航的层级、增加导航的选项、增加高频功能等，若导航选项保持不变仅位置变化则使用侧边 Tab。
• 侧边导航栏显示与收起：侧边导航栏默认显示，点击导航栏上的图标可临时收起侧边导航栏，在大尺寸设备上通过收起导航栏可以获得更多的内容显示空间。特殊场景下可选择侧边导航栏固定显示，固定显示时侧边导航栏固定显示在页面左侧，导航栏不显示收起图标，固定显示方式不支持悬浮显示，需要满足窗口最小宽度 ≥ 840。
• 侧边导航栏嵌入和悬浮：侧边导航栏支持嵌入和悬浮两种显示方式，在支持窗口自由缩放的大尺寸设备上，根据窗口的宽度变化在达到对应断点值后切换显示方式。窗口宽度 ≥ 840 时使用嵌入显示，窗口宽度 ≤ 840 时使用悬浮显示。

十三、Web 响应式布局

在 Web 侧进行多设备适配时，可以结合 Web 组件实现在不同设备上的定制体验。内容涵盖相对单位、媒体查询、监听窗口变化事件等多设备适配能力，并针对宫格布局、自定义弹窗、轮播布局等前端布局介绍适配的实现思路与方案。

1. 相对单位

在 Web 开发中，经常需要控制元素尺寸、边距等属性来调整页面效果。定义这些属性时，需要用到 CSS 提供的元素尺寸单位，主要分为绝对单位和相对单位。

• 绝对单位：不依赖于其他值或元素属性的固定值。常见的绝对单位如像素（px），适用于页面中尺寸固定不变的元素。
• 相对单位：依赖其他值或元素属性来确定元素尺寸。常用的相对单位包括：%（相对于包含块）、em（相对于当前元素的字体大小）、rem（相对于根元素字体大小）、vw/vh（相对于视窗尺寸）。

CSS 中设置的 px 单位会自动通过设备像素比（devicePixelRatio）进行换算，这使得 px 单位在视觉效果上与 HarmonyOS 中的 vp 单位相同。此特性可以消除设备物理像素的差异，便于 Web 应用迁移到 HarmonyOS。

2. 媒体查询

媒体查询允许开发者根据设备特性（如屏幕尺寸、分辨率、方向等）应用不同的样式规则。在 Web 页面适配 HarmonyOS 侧一多时，横纵向断点对应的尺寸范围与 HarmonyOS 侧推荐的断点划分范围保持一致。

3. 添加窗口事件

window 对象提供了 resize 事件注册，该事件在文档视图（窗口）调整大小时触发。当无法使用相对单位或媒体查询实现多设备体验时，可以通过 JavaScript 注册 resize 事件，使用 window.innerHeight 获取窗口高度，使用 window.innerWidth 获取窗口宽度。结合 CSS 与 HTML，根据获取到的窗口尺寸完成多设备体验适配。

4. 宫格布局

CSS 中提供了 grid 布局，与栅格布局类似，它将网页内容划分成一个一个的网格，通过任意组合不同的网格，从而做出各种各样的布局。使用宫格布局时，需要将容器的 display 属性设置为 grid，通过 grid-template-columns 定义列宽，grid-template-rows 定义行高，row-gap 和 column-gap 控制间距。宫格布局可结合媒体查询，以实现不同设备上的最佳体验。

5. 自定义弹窗

在大尺寸设备上，使用更大的弹窗展示，以避免内容过小、不易看清。通过 CSS 的媒体查询 @media 能力，设置不同断点下的弹窗尺寸。不仅需要对弹窗的尺寸进行响应式适配，还需要对弹窗的内容进行响应式适配。

6. 轮播布局

轮播布局提供了多张图片轮流播放的功能。可以通过一些技巧或复用第三方组件库来实现轮播图的效果。轮播布局的一多适配关键点包括：控制轮播元素的尺寸、控制轮播元素的间距、控制每次轮播的位移距离。

十四、常见问题

1. 常见的触发断点变化的场景有哪些？

常见的触发断点变化的场景包括以下几点：

• 设备旋转
• 折叠屏开合
• 窗口模式改变
• 自由窗口模式调节窗口大小

2. 显示缩放对断点的影响

vp 具体计算公式为：vp = px /（DPI/160）。在用户变更缩放比例后 dpi 会随之变化，从而导致 vp 会发生变化，需要考虑 vp 变化后对断点区间的影响。

以 Mate60 手机为例，设置显示缩放后，dpi 变化以及 vp 变化如下表所示：

显示缩放模式	dpi	vp（宽度）
小	2.7625	440
默认	3.25	374
大	3.8	319

因此，可能会出现显示缩放改变导致断点前后不一致的情况。若开发者需要应用随 dpi 改变刷新布局，可使用 on(‘densityUpdate’) 监听屏幕像素密度变化，并在监听回调中重新获取断点并刷新 UI。若开发者不希望应用受显示缩放影响布局，可以使用 setDefaultDensityEnabled() 设置应用是否使用系统默认 Density。

3. 像素转换

应用开发中，像素之间的转换是非常常见的场景。常见像素单位之间的转化可以参考 vp2px、px2vp、fp2px、px2fp、lpx2px、px2lpx 等接口。

4. 如何区分手机/折叠屏/平板/电脑/智慧屏/智能穿戴

• 手机/折叠屏/平板/电脑设备，可参考断点的定义中 HarmonyOS 常用设备断点区间表进行区分。
• 智慧屏设备，可以参考判断当前设备是智慧屏的方法进行区分。
• 智能穿戴设备，可以参考一多应用中如何区分智能穿戴设备的方法进行区分。

十五、总结与最佳实践

在鸿蒙应用开发中采用响应式布局，实现一次开发多端部署，关键要点可以总结如下：

1. 以断点为核心驱动布局变化

断点是响应式布局的基石。开发者应当基于横向断点和纵向断点，针对不同窗口尺寸和宽高比区间设计差异化的页面布局。横向断点决定内容列数、栅格数量和导航模式，纵向断点则用于区分横向窗口、类方形窗口和纵向窗口，实现特殊场景的差异化设计。

2. 灵活运用媒体查询与栅格系统

媒体查询用于监听窗口宽度、横竖屏、深浅色、设备类型等媒体特征，是触发响应式变化的重要手段。栅格系统提供了一种统一的定位标注和灵活的间距调整方法，通过 GridRow 和 GridCol 组件可以方便地实现不同断点下的列数、偏移和排序调整。

3. 充分利用响应式组件体系

ArkUI 提供了一系列响应式组件，包括 List、WaterFlow、Swiper、Grid、SideBarContainer、Navigation、Tabs、GridRow/GridCol 等。这些组件通过断点机制与属性绑定，开发者可以为不同断点预定义差异化的布局参数，当窗口尺寸跨越断点时自动实现布局重计算和样式切换。

4. 选择合适的响应式布局样式

分栏布局、重复布局、挪移布局和缩进布局是四种常见的响应式布局样式。开发者应根据实际场景选择合适的布局方式：

• 层级页面需要拆分平行显示时使用分栏布局。
• 相同属性的内容需要横向并列排布时使用重复布局。
• 横竖屏切换且宽高比明显变化时使用挪移布局。
• 宽屏上需要建立视觉层次结构时使用缩进布局。

5. 遵循移动优先原则

在适配过程中，先保证最小屏幕的内容、功能及界面布局完整性，再逐步向更大比例设备进行延展和功能适配。极端情况下，需要牺牲部分功能体验，确保最小集的完整呈现。

6. 注意系统安全区与避让规则

不同设备类型具有不同的安全区要求。手机需避让顶部信号栏和底部导航条，折叠设备需避让转轴区，平板需考虑分屏布局，智能穿戴需根据圆表或方表进行特殊设计。开发者应在布局中充分考虑安全区，确保内容不会被硬件挖孔、圆角等因素截断或遮盖。

7. 统一管理断点刷新逻辑

无论是通过 @Env 环境变量还是主动监听 windowSizeChange 事件，开发者都应当建立统一的窗口信息管理机制。将窗口尺寸、横向断点、纵向断点、安全区高度等信息集中管理，并在页面和组件中通过 @StorageLink 或 @ObjectLink 进行传递，可以显著降低多端适配的复杂度。

8. 持续实践与总结

响应式布局的实现需要结合具体业务场景不断打磨。HarmonyOS 提供了丰富的布局能力，开发者可以根据实际设备类型、窗口形态和使用场景灵活组合使用断点、栅格、媒体查询和响应式组件，最终实现真正意义上的“一次开发，多端部署”。

通过全面理解和应用上述响应式布局能力，开发者可以构建出能够在手机、折叠屏、平板、电脑、智慧屏、智能穿戴等多种设备上提供一致且优秀用户体验的鸿蒙应用，大幅降低多端适配的开发成本，提升开发效率和用户体验。