媒體查詢（mediaquery）

概述

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

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

引入與使用流程

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

首先導入媒體查詢模塊。

import mediaquery from '@ohos.mediaquery';

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

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

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

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

listener.on('change', onPortrait);

媒體查詢條件

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

語法規(guī)則

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

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

例如：

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

媒體類型（media-type）

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

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

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

媒體特征（media-feature）

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

場景示例

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

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';
  // 當設備橫屏時條件成立
  listener = mediaquery.matchMediaSync('(orientation: landscape)');

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

  aboutToAppear() {
    // 綁定當前應用實例
    portraitFunc = this.onPortrait.bind(this);
    // 綁定回調函數(shù)
    this.listener.on('change', portraitFunc);
  }

  // 改變設備橫豎屏狀態(tài)函數(shù)
  private changeOrientation(isLandscape: boolean) {
    // 獲取UIAbility實例的上下文信息
    let context = getContext(this) as common.UIAbilityContext;
    // 調用該接口手動改變設備橫豎屏狀態(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)'); // 當設備橫屏時條件成立

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

  aboutToAppear() {
    portraitFunc = this.onPortrait.bind(this); // 綁定當前應用實例
    this.listener.on('change', portraitFunc); //綁定回調函數(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); //調用該接口手動改變設備橫豎屏狀態(tài)
        })
      Text('Portrait').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange)
        .onClick(() => {
          let context = featureAbility.getContext();
          context.setDisplayOrientation(1); //調用該接口手動改變設備橫豎屏狀態(tài)
        })
    }
    .width('100%').height('100%')
  }
}

圖1 豎屏

圖2 橫屏