商城系統(tǒng) 注冊(cè)

微信小程序match-media怎么用及示例

2021-01-19|HiShop
導(dǎo)讀：match-media media query 匹配檢測(cè)節(jié)點(diǎn)。可以指定一組 media query 規(guī)則，滿足時(shí)，這個(gè)節(jié)點(diǎn)才會(huì)被展示。 通過(guò)這個(gè)節(jié)點(diǎn)可以實(shí)現(xiàn)頁(yè)面寬高在某個(gè)范圍時(shí)才展示某個(gè)區(qū)域這樣的效果。 match-media...

match-media

media query 匹配檢測(cè)節(jié)點(diǎn)?？梢灾付ㄒ唤M media query 規(guī)則，滿足時(shí)，這個(gè)節(jié)點(diǎn)才會(huì)被展示。

通過(guò)這個(gè)節(jié)點(diǎn)可以實(shí)現(xiàn)“頁(yè)面寬高在某個(gè)范圍時(shí)才展示某個(gè)區(qū)域”這樣的效果。

<match-media min-width="300" max-width="600">
  <view>當(dāng)頁(yè)面寬度在 300 ~ 500 px 之間時(shí)展示這里</view>
</match-media>
 
<match-media min-height="400" orientation="landscape">
  <view>當(dāng)頁(yè)面高度不小于 400 px 且屏幕方向?yàn)榭v向時(shí)展示這里</view>
</match-media>
電話咨詢 預(yù)約演示 0元開店