媒體查詢（mediaquery）

概述

媒體查詢作為響應(yīng)式設(shè)計(jì)的核心，在移動(dòng)設(shè)備上應(yīng)用十分廣泛。媒體查詢可根據(jù)不同設(shè)備類型或同設(shè)備不同狀態(tài)修改應(yīng)用的樣式。媒體查詢常用于下面兩種場景：

1. 針對(duì)設(shè)備和應(yīng)用的屬性信息（比如顯示區(qū)域、深淺色、分辨率），設(shè)計(jì)出相匹配的布局。
2. 當(dāng)屏幕發(fā)生動(dòng)態(tài)改變時(shí)（比如分屏、橫豎屏切換），同步更新應(yīng)用的頁面布局。

引入與使用流程

媒體查詢通過mediaquery模塊接口，設(shè)置查詢條件并綁定回調(diào)函數(shù)，在對(duì)應(yīng)的條件的回調(diào)函數(shù)里更改頁面布局或者實(shí)現(xiàn)業(yè)務(wù)邏輯，實(shí)現(xiàn)頁面的響應(yīng)式設(shè)計(jì)。具體步驟如下：

首先導(dǎo)入媒體查詢模塊。

import mediaquery from '@ohos.mediaquery';

通過matchMediaSync接口設(shè)置媒體查詢條件，保存返回的條件監(jiān)聽句柄listener。例如監(jiān)聽橫屏事件：

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

給條件監(jiān)聽句柄listener綁定回調(diào)函數(shù)onPortrait，當(dāng)listener檢測(cè)設(shè)備狀態(tài)變化時(shí)執(zhí)行回調(diào)函數(shù)。在回調(diào)函數(shù)內(nèi)，根據(jù)不同設(shè)備狀態(tài)更改頁面布局或者實(shí)現(xiàn)業(yè)務(wù)邏輯。

onPortrait(mediaQueryResult) {
  if (mediaQueryResult.matches) {
    // do something here
  } else {
    // do something here
  }
}

listener.on('change', onPortrait);

媒體查詢條件

媒體查詢條件由媒體類型、邏輯操作符、媒體特征組成，其中媒體類型可省略，邏輯操作符用于連接不同媒體類型與媒體特征，其中，媒體特征要使用“()”包裹且可以有多個(gè)。具體規(guī)則如下：

語法規(guī)則

語法規(guī)則包括媒體類型（media-type）、媒體邏輯操作（media-logic-operations）和媒體特征（media-feature）。

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

例如：

• screen and (round-screen: true) ：表示當(dāng)設(shè)備屏幕是圓形時(shí)條件成立。
• (max-height: 800) ：表示當(dāng)高度小于等于800vp時(shí)條件成立。
• (height <= 800) ：表示當(dāng)高度小于等于800vp時(shí)條件成立。
• screen and (device-type: tv) or (resolution < 2) ：表示包含多個(gè)媒體特征的多條件復(fù)雜語句查詢，當(dāng)設(shè)備類型為tv或設(shè)備分辨率小于2時(shí)條件成立。

媒體類型（media-type）

媒體邏輯操作（media-logic-operations）

媒體邏輯操作符：and、or、not、only用于構(gòu)成復(fù)雜媒體查詢，也可以通過comma（, ）將其組合起來，詳細(xì)解釋說明如下表。

媒體范圍操作符包括<=，>=，<，>，詳細(xì)解釋說明如下表。

媒體特征（media-feature）

媒體特征包括應(yīng)用顯示區(qū)域的寬高、設(shè)備分辨率以及設(shè)備的寬高等屬性，詳細(xì)說明如下表。

場景示例

下例中使用媒體查詢，實(shí)現(xiàn)屏幕橫豎屏切換時(shí)，給頁面文本應(yīng)用添加不同的內(nèi)容和樣式。

Stage模型下的示例：

import mediaquery from '@ohos.mediaquery';
import window from '@ohos.window';
import common from '@ohos.app.ability.common';

let portraitFunc = null;

@Entry
@Component
struct MediaQueryExample {
  @State color: string = '#DB7093';
  @State text: string = 'Portrait';
  // 當(dāng)設(shè)備橫屏?xí)r條件成立
  listener = mediaquery.matchMediaSync('(orientation: landscape)');

  // 當(dāng)滿足媒體查詢條件時(shí)，觸發(fā)回調(diào)
  onPortrait(mediaQueryResult) {
    if (mediaQueryResult.matches) { // 若設(shè)備為橫屏狀態(tài)，更改相應(yīng)的頁面布局
      this.color = '#FFD700';
      this.text = 'Landscape';
    } else {
      this.color = '#DB7093';
      this.text = 'Portrait';
    }
  }

  aboutToAppear() {
    // 綁定當(dāng)前應(yīng)用實(shí)例
    portraitFunc = this.onPortrait.bind(this);
    // 綁定回調(diào)函數(shù)
    this.listener.on('change', portraitFunc);
  }

  // 改變?cè)O(shè)備橫豎屏狀態(tài)函數(shù)
  private changeOrientation(isLandscape: boolean) {
    // 獲取UIAbility實(shí)例的上下文信息
    let context = getContext(this) as common.UIAbilityContext;
    // 調(diào)用該接口手動(dòng)改變?cè)O(shè)備橫豎屏狀態(tài)
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT)
    });
  }

  build() {
    Column({ space: 50 }) {
      Text(this.text).fontSize(50).fontColor(this.color)
      Text('Landscape').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange)
        .onClick(() => {
          this.changeOrientation(true);
        })
      Text('Portrait').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange)
        .onClick(() => {
          this.changeOrientation(false);
        })
    }
    .width('100%').height('100%')
  }
}

FA模型下的示例：

import mediaquery from '@ohos.mediaquery';
import featureAbility from '@ohos.ability.featureAbility';

let portraitFunc = null;

@Entry
@Component
struct MediaQueryExample {
  @State color: string = '#DB7093';
  @State text: string = 'Portrait';
  listener = mediaquery.matchMediaSync('(orientation: landscape)'); // 當(dāng)設(shè)備橫屏?xí)r條件成立

  onPortrait(mediaQueryResult) { // 當(dāng)滿足媒體查詢條件時(shí)，觸發(fā)回調(diào)
    if (mediaQueryResult.matches) { // 若設(shè)備為橫屏狀態(tài)，更改相應(yīng)的頁面布局
      this.color = '#FFD700';
      this.text = 'Landscape';
    } else {
      this.color = '#DB7093';
      this.text = 'Portrait';
    }
  }

  aboutToAppear() {
    portraitFunc = this.onPortrait.bind(this); // 綁定當(dāng)前應(yīng)用實(shí)例
    this.listener.on('change', portraitFunc); //綁定回調(diào)函數(shù)
  }

  build() {
    Column({ space: 50 }) {
      Text(this.text).fontSize(50).fontColor(this.color)
      Text('Landscape').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange)
        .onClick(() => {
          let context = featureAbility.getContext();
          context.setDisplayOrientation(0); //調(diào)用該接口手動(dòng)改變?cè)O(shè)備橫豎屏狀態(tài)
        })
      Text('Portrait').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange)
        .onClick(() => {
          let context = featureAbility.getContext();
          context.setDisplayOrientation(1); //調(diào)用該接口手動(dòng)改變?cè)O(shè)備橫豎屏狀態(tài)
        })
    }
    .width('100%').height('100%')
  }
}

圖1 豎屏

圖2 橫屏