# match-media
media query 匹配检测节点。
类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。
# 使用示例
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-title">match-media 媒体查询</view>
<demo-cell title="类似于网页开发中使用媒体查询来适配大屏小屏" noPadding></demo-cell>
<demo-cell title="当页面宽度最大 800px 时显示">
<match-media :max-width="800" >
<view>max-width=800</view>
</match-media>
</demo-cell>
<demo-cell title="当页面宽度最小 800px 时显示">
<match-media :min-width="800" >
<view>min-width=800</view>
</match-media>
</demo-cell>
<demo-cell title="高度不小于400px 且屏幕方向为横向时展示" subTitle="min-height=400, orientation=landscape">
<match-media :min-height="400" orientation="landscape">
<view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
</match-media>
</demo-cell>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| 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 ） |