微信小程序开发(六)：match-media组件

微信小程序通常都是在移动端使用，如今市面上各种各样的手机、平板等设备屏幕尺寸都不一样，这就会造成同一套代码在不同尺寸的终端上运行时出现各种尺寸适配问题。

web开发中我们通常使用媒体查询@media来给不同屏幕设置不同的页面样式，微信小程序官方文档中提供了一个match-media组件，根据屏幕尺寸不同进行不同的内容显示。

按照官方文档中来看，主要通过屏幕的宽度和高度尺寸和横屏还是竖屏限制页面match-media组件显示：
min-width:设置屏幕最小宽度，小于min-width的屏幕不显示
max-width:设置屏幕最大宽度，大于max-width的屏幕不显示
min-height:设置屏幕最小高度，小于min-height的屏幕不显示
max-height:设置屏幕最大高度，大于max-height的屏幕不显示
orientation:设置屏幕横屏（landscape）或者竖屏（portrait）时显示

官方文档中还提供了height和width两个属性，显示终端的高度或者宽度精准符合某一个像素值时显示某个内容。

上面列出的属性可以单独使用，也可以组合使用，组合使用的前提是属性之间不能出现冲突，比如：min-width="500" max-width="300"。

对match-media组件进行限制的这些宽度、高度属性的值默认单位是px，并且指的是终端屏幕的物理像素，而不是页面中某个容器的尺寸。

示例代码

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

<match-media min-width="500" max-width="1600">
  <view>当页面高度在500 ~ 1600 px 之间时显示这里</view>
</match-media>

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