mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
小莫唐尼
71 lines
2.5 KiB
Markdown
71 lines
2.5 KiB
Markdown
# 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)
|