This page is translated by Google Cloud Translation API

Switch to Chinese

match-media

media query match detection node.

Similar to using media query to adapt to different screen sizes in web page development, match-media is a basic view component that can adapt to different screen sizes. You can specify a set of media query rules, and this component will be displayed only when the query conditions are met.

For example, if a sidebar is placed in the match-media component, and the media query rule is set to display only on wide screen, then the sidebar can be displayed on the PC wide screen, but not on the mobile narrow screen.

Platform compatibility

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

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

Attribute description

Attribute name	Type	Defaults	Required	Instruction
min-width	number		No	Minimum page width (in px)
max-width	number		No	Maximum page width (in px)
width	number		No	Page width (in px)
min-height	number		No	Minimum page height (in px)
max-height	number		No	Maximum page height (in px)
height	number		No	Page height (in px)
orientation	string		No	Screen direction (landscape or portrait)

Example of match-media

For the following sample code, it is recommended to use HBuilderX to create a new uni-app project, able to directly experience the complete example.

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