# 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+ × × ×


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.

        <match-media :min-width="375" :max-width="800" >
            <view>当页面最小宽度 375px, 页面宽度最大 800px 时显示</view>

        <match-media :min-height="400" :orientation="landscape">
            <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
On This Page