Media Query

Media queries are widely used on mobile devices. You can use them to modify the application style based on the device type or specific features and device parameters (such as the screen resolution). Specifically, media queries allow you to:

1. Design a layout style based on the device and app attributes.

2. Update the page layout to adapt to dynamic screen changes (for example, screen splitting or switching between landscape and portrait modes).

Usage

Invoke the mediaquery API to set the media query condition and the callback, and change the page layout or implement service logic in the callback corresponding to the condition.

First, import the mediaquery module, as shown below:

import mediaquery from '@ohos.mediaquery'

Then, use the matchMediaSync API to set the media query condition and save the returned listener, as shown below:

listener = mediaquery.matchMediaSync('(orientation: landscape)')

Finally, register the callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows:

onPortrait(mediaQueryResult) {
    if (mediaQueryResult.matches) {
        // do something here
    } else {
        // do something here
    }
}
listener.on('change', onPortrait)

Syntax of Media Query Conditions

[media-type] [and|not|only] [(media-feature)]

Examples are as follows:

screen and (round-screen: true) // The query is valid when the device screen is round.

(max-height: 800) // The query is valid when the height does not exceed 800.

(height <= 800) // The query is valid when the height does not exceed 800.

screen and (device-type: tv) or (resolution < 2) // The query is valid only when all media features are true.

media-type

Media Logic Operation (and|not|only)

You can use logical operators (and, or, not, and only) to compose complex media queries. You can also combine them using comma (,). The following table describes the operators.

Table 1 Media logical operators

At MediaQuery Level 4, range query is imported so that you can use the operators including <=, >=, <, and > besides the max- and min-operators.

Table 2 Logical operators for range query

media-feature

Example Scenario

Use media queries to apply different content and styles to the page text when the screen is switched between landscape and portrait modes.

import mediaquery from '@ohos.mediaquery'

let portraitFunc = null

@Entry
@Component
struct MediaQueryExample {
  @State color: string = '#DB7093'
  @State text: string = 'Portrait'
  listener = mediaquery.matchMediaSync('(orientation: landscape)') // The query is valid when the device is in landscape mode.

  onPortrait(mediaQueryResult) {
    if (mediaQueryResult.matches) {
      this.color = '#FFD700'
      this.text = 'Landscape'
    } else {
      this.color = '#DB7093'
      this.text = 'Portrait'
    }
  }

  aboutToAppear() {
    portraitFunc = this.onPortrait.bind(this) // Bind to the current application instance.
    this.listener.on('change', portraitFunc)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text(this.text).fontSize(50).fontColor(this.color)
    }
    .width('100%').height('100%')
  }
}

When the device is in landscape orientation, the text content is displayed in landscape mode in the color of #FFD700.

When the device is not in landscape orientation, the text content is displayed in portrait mode in the color of #DB7093.

你可能感兴趣的鸿蒙文章

harmony 鸿蒙UI Development

harmony 鸿蒙ArkUI Overview

harmony 鸿蒙File Organization

harmony 鸿蒙app.js

harmony 鸿蒙“js” Tag

harmony 鸿蒙Lifecycle

harmony 鸿蒙Multi-Language Capability

harmony 鸿蒙Resource Limitations and Access

harmony 鸿蒙CSS

harmony 鸿蒙HML