微信小程序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>
您可能感興趣: