README.md
1# ArkUI - Media Query
2
3### Introduction
4
5 This sample shows how to use **MediaQuery** to display different UI effects on different devices.
6
7### Usage
8
91. On a portrait device, the news list is displayed on the home screen of the sample app. You can touch a piece of news to access the details page.
10
112. On a landscape device, the news list is displayed on the left side of the home screen of the sample app, and the news details are displayed on the right side. You can touch any news on the left to show its details on the right.
12
13### Constraints
14
15This sample can only be run on standard-system devices.
16
README_zh.md
1# 媒体查询
2
3### 简介
4
5此Demo展示如何使用媒体查询，完成在不同设备上显示不同的界面效果。实现效果如下：
6
7 
8
9### 相关概念
10
11MediaQueryListener：媒体查询的句柄，并包含了申请句柄时的首次查询结果。
12on(type: 'change', callback）方法：通过句柄向对应的查询条件注册回调，当媒体属性发生变更时会触发该回调。
13
14### 相关权限
15
16不涉及。
17
18### 使用说明
19
201.在竖屏设备上，首页展示新闻列表，点击新闻进入详情界面。
21
222.在横屏设备上，首页左侧展示新闻列表，右侧显示新闻详情，点击新闻右侧显示所点击的新闻的详情。
23
24### 约束与限制
25
261.本示例仅支持标准系统上运行。
27
282.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。
29
