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://uniapp.dcloud.net.cn/component/match-media.html

Platform Compatibility

See official docs for platform support table: https://uniapp.dcloud.net.cn/component/match-media.html

Examples

Example (Example 1)

<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)

<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

2.5 KiB Raw Permalink Blame History Unescape Escape