響應(yīng)式布局之媒體查詢

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

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

媒體查詢條件

符合媒體查詢條件會(huì)觸發(fā)屏幕的操作，比如在手機(jī)屏幕上布局如何顯示，在平板屏幕上布局如何顯示。

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

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

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

媒體類型（media-type）

查詢條件未寫媒體類型時(shí)，默認(rèn)為screen。媒體類型必須寫在查詢條件開頭。

類型	說明
screen	按屏幕相關(guān)參數(shù)進(jìn)行媒體查詢。

媒體特征（media-feature）

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

比較height、width等寬高尺寸時(shí)，支持vp和px單位，無單位默認(rèn)為px。

類型	說明
height	應(yīng)用頁面可繪制區(qū)域的高度。
min-height	應(yīng)用頁面可繪制區(qū)域的最小高度。
max-height	應(yīng)用頁面可繪制區(qū)域的最大高度。
width	應(yīng)用頁面可繪制區(qū)域的寬度。
min-width	應(yīng)用頁面可繪制區(qū)域的最小寬度。
max-width	應(yīng)用頁面可繪制區(qū)域的最大寬度。
resolution	設(shè)備的分辨率，支持dpi，dppx和dpcm單位。其中：- dpi表示每英寸中物理像素個(gè)數(shù)，1dpi ≈ 0.39dpcm；- dpcm表示每厘米上的物理像素個(gè)數(shù)，1dpcm ≈ 2.54dpi；- dppx表示每個(gè)px中的物理像素?cái)?shù)（此單位按96px = 1英寸為基準(zhǔn)，與頁面中的px單位計(jì)算方式不同），1dppx = 96dpi。
min-resolution	設(shè)備的最小分辨率。
max-resolution	設(shè)備的最大分辨率。
orientation	屏幕的方向?？蛇x值：- orientation: portrait（設(shè)備豎屏）；- orientation: landscape（設(shè)備橫屏）。
device-height	設(shè)備的高度。
min-device-height	設(shè)備的最小高度。
max-device-height	設(shè)備的最大高度。
device-width	設(shè)備的寬度。當(dāng)前僅在應(yīng)用初始化時(shí)保存一次，不會(huì)隨設(shè)備寬度變化實(shí)時(shí)更新，例如折疊屏的折疊展開場景。
device-type	設(shè)備的類型。可選值：default、tablet。
min-device-width	設(shè)備的最小寬度。
max-device-width	設(shè)備的最大寬度。
round-screen	屏幕類型，圓形屏幕為true，非圓形屏幕為false。
dark-mode	系統(tǒng)當(dāng)前的深淺模式?？蛇x值：true、false。深色模式為true，淺色模式為false。

例如

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

媒體查詢監(jiān)聽

可以根據(jù)固定查詢條件生成所對應(yīng)的媒體查詢監(jiān)聽，此監(jiān)聽一直在運(yùn)行中，直到符合媒體查詢條件，觸發(fā)對應(yīng)的操作。

private listener:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(800vp>width>320vp)')
this.listener.on('change',(result:mediaquery.MediaQueryResult)=>{ //綁定改變監(jiān)聽})

案例

根據(jù)屏幕大小顯示不同的背景顏色。

import { mediaquery } from '@kit.ArkUI';@Entry
@Component
struct Mediapage {@State message: string = 'Hello World';// 屏幕尺寸在320到600private listener:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(600vp>width>320vp)')// 屏幕尺寸小于320private listener1:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(320vp>width)')// 屏幕尺寸大于600private listener2:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(width>600vp)')@State bakcolor:Color=Color.WhiteaboutToAppear(): void { //所有監(jiān)聽綁定事件this.listener.on('change',(result:mediaquery.MediaQueryResult)=>{if(result.matches){this.bakcolor=Color.Yellow}})this.listener1.on('change',(result:mediaquery.MediaQueryResult)=>{if(result.matches){this.bakcolor=Color.Red}})this.listener2.on('change',(result:mediaquery.MediaQueryResult)=>{if(result.matches){this.bakcolor=Color.Green}})}aboutToDisappear(): void {//解綁監(jiān)聽this.listener.off("change")this.listener1.off("change")this.listener2.off("change")}build() {RelativeContainer() {}.backgroundColor(this.bakcolor).height('100%').width('100%')}
}

運(yùn)行效果