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 
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 8.
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资源限定与访问：资源限定词可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括屏幕密度等维度，限定词之间通过中划线（-）连接，开发者在**resources**目录下创建限定词文件。
12原子布局：在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。
13响应式布局：通过使用响应式布局能力开发新应用或者改造已有应用，可以使应用在手机、平板、智慧屏等各种尺寸的设备都有良好的展示效果。
14
15### 相关权限
16
17不涉及。
18
19### 使用说明
20
211.本示例中的资源限定词和响应式布局针对常见设备类型做了适配，可以在预览器中开启"Multi-profile preview"进行多设备预览。
22
232.本示例中的原子布局提供了滑动条（slider），通过拖动滑动条更改父容器尺寸可以更直观的查看原子布局的效果。为了突出重点以及易于理解，此部分的代码做了一定精简，建议通过IDE预置的MatePadPro预览器查看此部分效果。
24
253.启动应用，首页展示了**资源限定词**、**原子布局**和**响应式布局**三个按钮。
26
274.点击**资源限定词**进入新界面，展示字符串和图片资源的使用。
28
295.点击**原子布局**进入新界面，分别展示原子布局的拉伸能力、缩放能力、隐藏能力、折行能力、均分能力、占比能力、延伸能力。
30
316.点击**响应式布局**进入新界面，展示媒体查询、栅格布局、典型场景三类响应式布局能力。
32
33### 约束与限制
34
351.本示例仅支持标准系统上运行。
36
372.本示例为FA模型，从API version 8开始支持。
38
393.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。
40
414.本示例着重介绍了一多的自适应布局能力，未引入断点能力，建议查看相关能力在IDE提供的MatePadPro预览器中运行和查看效果。
