MatchMedia
media query
match detection node. You can specify a set of media query
rules that will be satisfied before this node is displayed.
This node enables the effect that an area is only displayed when the page is within a certain width and height range.
Type
ComponentType<MatchMediaProps>
Examples
- React
- Vue
class App extends Components {
render () {
return (
<View>
<MatchMedia minWidth="300" maxWidth="600">
<view>Displayed when the page width is between 300 ~ 500 px</view>
</MatchMedia>
<MatchMedia minHeight="400" orientation="landscape">
<view>Displayed here when the page height is not less than 400 px and the screen orientation is portrait</view>
</MatchMedia>
</View>
)
}
}
<template>
<view class="components-page">
<match-media min-width="300" max-width="500">
<view>Displayed when the page width is between 300 ~ 500 px</view>
</match-media>
<match-media min-height="400" orientation="landscape">
<view>Displayed here when the page height is not less than 400 px and the screen orientation is portrait</view>
</match-media>
</view>
</template>
matchMediaProps
Property | Type | Required | Description |
---|---|---|---|
minWidth | number | No | Specify the display condition for the minimum page width in px |
maxWidth | number | No | Specify the display condition for the maximum page width in px |
width | number | No | Specify the display condition for the page width in px |
minHeight | number | No | Specify the display condition for the minimum page height in px |
maxHeight | number | No | Specify the display condition for the maximum page height in px |
Height | number | No | Specify the display condition for the page height in px |
orientation | string | No | Specify the display condition for the screen orientation |
API Support
API | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
matchMediaProps.minWidth | ✔️ | ||
matchMediaProps.maxWidth | ✔️ | ||
matchMediaProps.width | ✔️ | ||
matchMediaProps.minHeight | ✔️ | ||
matchMediaProps.maxHeight | ✔️ | ||
matchMediaProps.Height | ✔️ | ||
matchMediaProps.orientation | ✔️ |