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

React

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

Vue

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