Skip to main content
Version: 3.x

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.

Reference

Type

ComponentType<MatchMediaProps>

Examples

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

matchMediaProps

PropertyTypeRequiredDescription
minWidthnumberNoSpecify the display condition for the minimum page width in px
maxWidthnumberNoSpecify the display condition for the maximum page width in px
widthnumberNoSpecify the display condition for the page width in px
minHeightnumberNoSpecify the display condition for the minimum page height in px
maxHeightnumberNoSpecify the display condition for the maximum page height in px
HeightnumberNoSpecify the display condition for the page height in px
orientationstringNoSpecify the display condition for the screen orientation

API Support

APIWeChat Mini-ProgramH5React Native
matchMediaProps.minWidth✔️
matchMediaProps.maxWidth✔️
matchMediaProps.width✔️
matchMediaProps.minHeight✔️
matchMediaProps.maxHeight✔️
matchMediaProps.Height✔️
matchMediaProps.orientation✔️