小程序大小屏适配新工具：match-media

media query 匹配检测节点。可以指定一组 media query 规则。只有在满足规则时，这个节点才会被展示。

通过这个节点可以实现不同屏幕展示不同UI的效果，和css中的媒体查询类似。

min-width：页面最小宽度（ px 为单位）

max-width：页面最大宽度（ px 为单位）

width：页面宽度（ px 为单位）

min-height：页面最小高度（ px 为单位）

max-height：页面最大高度（ px 为单位）

height：页面高度（ px 为单位）

orientation：屏幕方向（ landscape 或 portrait ）

代码示例：

<match-media min-width="300" max-width="600">
  <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
</match-media>

<match-media min-height="400" orientation="landscape">
  <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
</match-media>