Media inquiry

Introduction and Usage Process of Media Queries

Media queries are a powerful tool for responsive design, allowing developers to adjust the layout and behavior of an application based on the characteristics of the device it is running on. By using the mediaquery module interface, developers can set query conditions and bind callback functions. When any media feature changes, the callback function is triggered, returning the match result. Based on this result, developers can change the page layout or implement specific business logic to achieve responsive design. Here is a step-by-step guide on how to use media queries:

Step-by-Step Guide

1. Import the Media Query Module

First, import the mediaquery module from the @kit.ArkUI package.

import { mediaquery } from '@kit.ArkUI';

2. Set Up Media Query Conditions

Use the matchMediaSync interface to set up media query conditions and save the returned condition listener handle. For example, to listen for landscape orientation events:

let listener: mediaquery.MediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)');

3. Bind a Callback Function to the Listener

Bind a callback function to the condition listener handle. When the listener detects a change in the device state, it will execute the callback function. Within the callback function, you can change the page layout or implement business logic based on the device state.

onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) {
  if (mediaQueryResult.matches as boolean) {
    // Perform actions when the condition is met (e.g., landscape orientation)
  } else {
    // Perform actions when the condition is not met (e.g., portrait orientation)
  }
}

listener.on('change', onPortrait);

Media Query Conditions

Media query conditions consist of media types, logical operators, and media features. The media type can be omitted, and logical operators are used to connect different media types and features. Media features must be enclosed in parentheses and can be multiple.

Syntax Rules

The syntax includes media type (media-type), media logical operations (media-logic-operations), and media features (media-feature).

[media-type] [media-logic-operations] [(media-feature)]

For example:

• screen and (round-screen: true): This condition is met when the device screen is round.
• (max-height: 800px): This condition is met when the height is less than or equal to 800px.
• (height <= 800px): This condition is met when the height is less than or equal to 800px.
• screen and (device-type: tv) or (resolution < 2): This is a complex query with multiple media features, met when the device type is TV or the device resolution is less than 2.
• (dark-mode: true): This condition is met when the system is in dark mode.

Media Types (media-type)

If no media type is specified in the query condition, it defaults to screen. The media type must be placed at the beginning of the query condition.

Type	Description
screen	Media queries based on screen-related parameters.

Media Logical Operations (media-logic-operations)

Media logical operators (and, or, not, only) are used to construct complex media queries. They can also be combined using commas (,). Detailed explanations are provided in the table below.

Table 1: Media Logical Operators

Type	Description
and	Connects multiple media features with a logical "AND". The query condition is met only if all media features are true. It can also combine media types and features. For example: screen and (device-type: wearable) and (max-height: 600px) is met when the device type is wearable and the application's maximum height is less than or equal to 600 pixels.
or	Connects multiple media features with a logical "OR". The query condition is met if any of the media features are true. For example: screen and (max-height: 1000px) or (round-screen: true) is met when the application height is less than or equal to 1000 pixels or the device screen is round.
not	Must be used with screen. It inverts the media query result. The query condition is met when the media query result is false. For example: not screen and (min-height: 50px) and (max-height: 600px) is met when the application height is less than 50 pixels or greater than 600 pixels.
only	Must be used with screen. It has the same effect as using screen alone. For example: only screen and (height <= 50).
comma (,)	Connects multiple media features with a logical "OR". The query condition is met if any of the media features are true. It has the same effect as the or operator. For example: screen and (min-height: 1000px), (round-screen: true) is met when the application height is greater than or equal to 1000 pixels or the device screen is round.

Media Range Operators

Media range operators include <=, >=, <, >. Detailed explanations are provided in the table below.

Table 2: Media Logical Range Operators

Type	Description
<=	Less than or equal to. For example: screen and (height <= 50).
>=	Greater than or equal to. For example: screen and (height >= 600).
<	Less than. For example: screen and (height < 50).
>	Greater than. For example: screen and (height > 600).

different devices.