MatchMedia - 《Taro 文档帮助手册教程》

sidebar_label: MatchMedia
Type
Examples
matchMediaProps
- API Support

title: MatchMedia

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

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

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

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