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预览器中运行和查看效果。
