• Home
Name Date Size #Lines LOC

..--

entry/22-Oct-2025-3,1182,195

hvigor/22-Oct-2025-2221

screenshots/22-Oct-2025-

.gitignoreD22-Oct-2025100 77

README.mdD22-Oct-20252.3 KiB4422

README_zh.mdD22-Oct-20256.3 KiB10175

build-profile.json5D22-Oct-20251.1 KiB4442

hvigorfile.jsD22-Oct-2025174 21

hvigorwD22-Oct-20252 KiB6228

hvigorw.batD22-Oct-20252 KiB7356

oh-package.json5D22-Oct-2025827 2625

ohosTest.mdD22-Oct-20254.2 KiB3735

README.md

1# Multi-device Adaptation
2
3### Introduction
4
5This sample shows multi-device adaptation capabilities in JS, including resource qualifiers, atomic layouts, and responsive layouts. The display effect is as follows.
6
7![atomic_layout2](screenshots/en/scaling_capability.png)  ![atomic_layout4](screenshots/en/wrap_capability.png)
8
9
10
11### Concepts
12
13Resource qualifier: The name of a resource qualifier consists of one or more qualifiers that represent the application scenarios or device characteristics, such as screen density. The qualifiers are separated using hyphens (-). The **qualifiers** file is available in the **resources** directory.
14Atomic layout: It implements adaptive layout for screens of different sizes and types.
15Responsive layout: It enables apps to be well displayed on devices of various resolutions, including mobile phones, tablets, and smart TVs.
16
17### Required Permissions
18
19N/A
20
21### Usage
22
231. This sample provides resource qualifiers and the responsive layout for common device types. You can enable **Multi-profile preview** in the previewer for multi-device preview.
24
252. This sample provides a slider in the atomic layout. You can drag the slider to change the size of the parent container. For better highlighting and easier understanding, the code in this part is simplified. You can use the MatePadPro previewer preset in DevEco Studio to view the effect of the atomic layout.
26
273. Start the sample app. The **Resource qualifiers**, **Atomic layout**, and **Responsive layout** buttons are displayed on the home page.
28
294. Touch **Resource qualifiers**. A page is displayed, showing the usage of strings and images.
30
315. Touch **Atomic layout**. A page is displayed, showing the stretching, scaling, hiding, wrapping, equalization, proportion, and extension capabilities of the atomic layout.
32
336. Touch **Responsive layout**. A page is displayed, showing the media query, grid layout, and typical scenario capabilities of the responsive layout.
34
35### Constraints
36
371. This sample can only be run on standard-system devices.
38
392. This sample demonstrates the FA model, which supports only API version 9.
40
413. DevEco Studio 3.0 Beta3 (Build version: 3.0.0.901, built on May 30, 2022) must be used.
42
434. This sample does not introduce the breakpoint capability. To learn this capability, use the MatePadPro previewer provided by DevEco Studio.
44

README_zh.md

1# 多设备自适应能力
2
3### 介绍
4
5此Demo展示在JS中的多设备自适应能力，包括资源限定词、原子布局和响应式布局。
6
7
8### 效果预览
9| 首页                                   | 原子布局能力页面                                                 | 资源限定词页面                                      |
10|--------------------------------------|----------------------------------------------------------|----------------------------------------------|
11| ![home](screenshots/device/home.png) | ![atomic_layout](screenshots/device/atomic_layout.png) | ![resource](screenshots/device/resource.png) |
12
13使用说明
14
151.本示例中的资源限定词和响应式布局针对常见设备类型做了适配，可以在预览器中开启"Multi-profile preview"进行多设备预览。
16
172.本示例中的原子布局提供了滑动条（slider），通过拖动滑动条更改父容器尺寸可以更直观的查看原子布局的效果。为了突出重点以及易于理解，此部分的代码做了一定精简，建议通过IDE预置的MatePadPro预览器查看此部分效果。
18
193.启动应用，首页展示了**资源限定词**、**原子布局**和**响应式布局**三个按钮。
20
214.点击**资源限定词**进入新界面，展示字符串和图片资源的使用。
22
235.点击**原子布局**进入新界面，分别展示原子布局的拉伸能力、缩放能力、隐藏能力、折行能力、均分能力、占比能力、延伸能力。
24
256.点击**响应式布局**进入新界面，展示媒体查询、栅格布局、典型场景三类响应式布局能力。
26
27#### 相关概念
28
29资源限定与访问：资源限定词可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括屏幕密度等维度，限定词之间通过中划线（-）连接，开发者在**resources**目录下创建限定词文件。
30原子布局：在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。
31响应式布局：通过使用响应式布局能力开发新应用或者改造已有应用，可以使应用在手机、平板、智慧屏等各种尺寸的设备都有良好的展示效果。
32
33### 工程目录
34```
35code/SuperFeature/MultiDeviceAppDev/JsAdaptiveCapabilities
36└─src
37    └─main
38        ├─js
39        │  └─MainAbility
40        │      ├─common                            //公共资源包
41        │      ├─i18n                              //国际化语言包
42        │      ├─pages
43        │      │  ├─atomicLayoutCapability         //原子布局
44        │      │  │  ├─equipartitionCapability     //均分能力
45        │      │  │  ├─extensionCapability
46        │      │  │  │  ├─extensionCapability1     //延伸能力1
47        │      │  │  │  └─extensionCapability2     //延伸能力2
48        │      │  │  ├─flexibleCapability
49        │      │  │  │  ├─flexibleCapability1      //拉伸能力1
50        │      │  │  │  └─flexibleCapability2      //拉伸能力2
51        │      │  │  ├─hiddenCapability            //隐藏能力
52        │      │  │  ├─index                       //原子布局首页
53        │      │  │  ├─proportionCapability        //均分能力
54        │      │  │  ├─scaleCapability             //均分能力
55        │      │  │  └─wrapCapability              //折行能力
56        │      │  ├─index                          //主页
57        │      │  └─resourceQualifier              //资源限定注入
58        │      │      └─responsiveLayout           //响应式布局
59        │      │          ├─gridContainer          //网格容器
60        │      │          ├─index                  //响应布局首页
61        │      │          ├─mediaQuery             //媒体查询
62        │      │          └─typicalScene           //典型布局
63        │      └─resources                         //限定词资源
64        └─resources                                //公共资源
65```
66
67### 具体实现
681、index下定义三个box，分别资源限定词resourceQualifier、原子布局atomicLayoutCapability、响应式布局responsiveLayout，并通过onclick路由到各自的组件。
692、资源限定词组件： 在MainAbility.resource下定义需要访问的资源，在资源限定词resourceQualifier组件中，使用$r('')即可实现不同形态和规格访问到不同的资源。
703、原子布局atomicLayoutCapability组件：该布局下，通过slide滑动控制样式的展示比率rate,例如下面这个样例，[源码参考](entry/src/main/js/MainAbility/pages/atomicLayoutCapability/extensionCapability/extensionCapability2/extensionCapability2.hml )。
714、响应式布局responsiveLayout ：该布局下需要相对应的媒体资源，比如sm、md、lg，然后监听媒体的变化，从而对资源进行响应式的调整。 例如栅格布局，[源码参考](entry/src/main/js/MainAbility/pages/responsiveLayout/gridContainer/gridContainer.hml )。本案例定义了xs、sm、md、lg下的栅格宽度，根据系统的规格自动选择相应的属性。
725、使用mediaQuery对规格进行监听，判断当前系统的横竖屏，从而加载相应的资源，[源码参考](entry/src/main/js/MainAbility/pages/responsiveLayout/mediaQuery/mediaQuery.hml )。
73
74### 相关权限
75
76不涉及。
77
78### 依赖
79
80不涉及。
81
82### 约束与限制
83
841.本示例仅支持标准系统上运行。
85
862.本示例为FA模型，已适配API version 9版本SDK，版本号：3.2.11.9。
87
883.本示例需要使用DevEco Studio 3.1 Canary1 (Build Version: 3.1.0.100)及以上版本才可编译运行。
89
904.本示例着重介绍了一多的自适应布局能力，未引入断点能力，建议查看相关能力在IDE提供的MatePadPro预览器中运行和查看效果。
91
92### 下载
93
94如需单独下载本工程，执行如下命令：
95```
96git init
97git config core.sparsecheckout true
98echo code/SuperFeature/MultiDeviceAppDev/JsAdaptiveCapabilities/ > .git/info/sparse-checkout
99git remote add origin https://gitee.com/openharmony/applications_app_samples.git
100git pull origin master
101```