match-凯发app官方网站

更新时间：2023-11-30 19:01:33

订阅更新

我的文档

设置

简介

用以提供更友好的小程序响应式布局方案。可指定一组 media query 规则，满足匹配时，该节点展示。

针对不同的屏幕尺寸设置不同的页面布局。

使用限制

●

版本要求基础库

及以上，若版本较低则不会显示该组件，建议做

。

●

native 渲染引擎

：暂不支持。可以通过

my.caniuse('match-media')

判断是否支持。

使用

示例代码

<match-media min-width="375" max-width="500">

<view>当页面宽度在 375 ~ 500 px 之间时展示这里view>

match-media>

<match-media min-height="300" orientation="landscape">

<view>当页面高度不小于 300 px 且屏幕方向为纵向时展示这里view>

match-media>

属性说明

属性	类型	描述
min-width	number	页面最小宽度。单位为 px。
max-width	number	页面最大宽度。单位为 px。
width	number	页面宽度。单位为 px。
min-height	number	页面最小高度。单位为 px。
max-height	number	页面最大高度。单位为 px。
height	number	页面高度。单位为 px。
orientation	string	屏幕方向。 ●landscape：横向 ●portrait：纵向