# match-media

media query 匹配检测节点。

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

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

平台兼容性

app h5 微信小程序 支付宝小程序 qq小程序 百度小程序 抖音小程序 飞书小程序 360小程序 快应用 京东小程序
2.8.12+,app-vue 基础库 2.11.1+ × × ×

注意:支付宝小程序、qq小程序、百度小程序、抖音小程序,暂不支持监听屏幕动态改变,即只执行一次媒体查询。

属性说明

属性名 类型 默认值 必填 说明
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 )

match-media 示例

以下示例代码,推荐使用HBuilderX,新建uni-app项目,可直接体验完整示例。


<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>
本页导读