# match-media

## Instructions

media query 匹配检测节点。

类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。

例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。

### Syntax

- 使用 `<match-media />`（或 `<match-media></match-media>`，当需要包裹子节点时）。
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。

#### Properties

| 属性名 | 类型 | 默认值 | 必填 | 说明 |
| --- | --- | --- | --- | --- |
| min-width | number |  | 否 | 页面最小宽度（ px 为单位） |
| max-width | number |  | 否 | 页面最大宽度（ px 为单位） |
| width | number |  | 否 | 页面宽度（ px 为单位） |
| min-height | number |  | 否 | 页面最小高度（ px 为单位） |
| max-height | number |  | 否 | 页面最大高度（ px 为单位） |
| height | number |  | 否 | 页面高度（ px 为单位） |
| orientation | string |  | 否 | 屏幕方向（ landscape 或 portrait ） |

#### Events

See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/match-media.html`

#### Platform Compatibility

See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/match-media.html`

### Examples

### Example (Example 1)

```vue
<template>
    <view>
        <match-media :min-width="375" :max-width="800" >
            <view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
        </match-media>

        <match-media :min-height="400" :orientation="landscape">
            <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
        </match-media>
    </view>
</template>
```

### Example (Example 2)

```html
<template>
    <view>
        <match-media :min-width="375" :max-width="800" >
            <view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
        </match-media>

        <match-media :min-height="400" :orientation="landscape">
            <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
        </match-media>
    </view>
</template>
```

Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/match-media.html)