# match-media
基礎(chǔ)庫 2.11.1 開始支持,低版本需做兼容處理。
微信 Windows 版:支持
微信 Mac 版:支持
微信 鴻蒙 OS 版:支持
渲染框架支持情況:WebView
# 功能描述
media query 匹配檢測節(jié)點(diǎn)。可以指定一組 media query 規(guī)則,滿足時(shí),這個(gè)節(jié)點(diǎn)才會(huì)被展示。
通過這個(gè)節(jié)點(diǎn)可以實(shí)現(xiàn)“頁面寬高在某個(gè)范圍時(shí)才展示某個(gè)區(qū)域”這樣的效果。
# 屬性說明
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| min-width | number | 否 | 頁面最小寬度( px 為單位) | 2.11.1 | |
| max-width | number | 否 | 頁面最大寬度( px 為單位) | 2.11.1 | |
| width | number | 否 | 頁面寬度( px 為單位) | 2.11.1 | |
| min-height | number | 否 | 頁面最小高度( px 為單位) | 2.11.1 | |
| max-height | number | 否 | 頁面最大高度( px 為單位) | 2.11.1 | |
| height | number | 否 | 頁面高度( px 為單位) | 2.11.1 | |
| orientation | string | 否 | 屏幕方向( landscape 或 portrait ) | 2.11.1 |
# 示例代碼
<match-media min-width="300" max-width="600">
<view>當(dāng)頁面寬度在 300 ~ 500 px 之間時(shí)展示這里</view>
</match-media>
<match-media min-height="400" orientation="landscape">
<view>當(dāng)頁面高度不小于 400 px 且屏幕方向?yàn)榭v向時(shí)展示這里</view>
</match-media>