媒体查询组件

match-media 是 Uniapp 中的一个核心组件，用于实现媒体查询（media query）功能。它可以根据设备的屏幕尺寸、方向等动态控制页面元素的显示或隐藏，进而实现响应式设计。开发者可以通过设置条件来控制特定视图在某些设备上是否显示。

1. 什么是 match-media 组件？

match-media 组件允许开发者根据设备的宽度、高度、屏幕方向等条件，动态控制页面内容的展示。它的功能类似于 CSS 的媒体查询，但通过组件的方式直接在模板中使用，简化了响应式布局的实现。

使用场景

• 设备适配：根据设备宽度显示不同内容，例如在大屏设备上显示更多信息，而在移动设备上显示精简内容。
• 屏幕方向控制：根据设备屏幕的方向（横向或纵向），展示或隐藏特定的视图。
• 响应式布局：在多端开发中，开发者可以通过 match-media 组件方便地实现跨平台的响应式布局。

2. 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（纵向）。

2.1 min-width 和 max-width

• 说明：设置页面宽度的最小和最大范围，只有当设备的屏幕宽度在这个范围内时，匹配的内容才会显示。
• 类型：Number
• 示例：页面宽度在 375px 到 800px 之间时，显示特定内容。

<template>
  <!-- 当页面宽度在 375px 到 800px 之间时显示该视图 -->
  <match-media :min-width="375" :max-width="800">
    <view>宽度为 375px - 800px 时显示此内容</view>
  </match-media>
</template>

<style scoped>
view {
  padding: 10px;
  margin: 10px 0;
  background-color: #f0f0f0;
  text-align: center;
}
</style>

2.2 min-height 和 max-height

• 说明：设置页面高度的最小和最大范围，只有当设备的屏幕高度在这个范围内时，匹配的内容才会显示。
• 类型：Number
• 示例：当页面高度大于 600px 且小于 1200px 时，显示特定内容。

<template>
  <!-- 当页面高度在 600px 到 1200px 之间时显示该视图 -->
  <match-media :min-height="600" :max-height="1200">
    <view>高度为 600px - 1200px 时显示此内容</view>
  </match-media>
</template>

<style scoped>
view {
  padding: 10px;
  margin: 10px 0;
  background-color: #d9f9b1;
  text-align: center;
}
</style>

2.3 orientation

• 说明：设置屏幕的显示方向。orientation 属性可以控制在横屏（landscape）或竖屏（portrait）下显示特定内容。
• 类型：String
• 示例：当设备处于横屏状态时，显示特定内容。

<template>
  <!-- 当设备处于横屏时显示该视图 -->
  <match-media :orientation="'landscape'">
    <view>横屏时显示此内容</view>
  </match-media>
</template>

<style scoped>
view {
  padding: 10px;
  margin: 10px 0;
  background-color: #ffdddd;
  text-align: center;
}
</style>

3. 适配不同设备和方向案例

以下案例展示了如何通过 match-media 组件根据设备的宽度、高度和屏幕方向动态控制视图显示，从而实现响应式布局。

<template>
  <view>
    <!-- 在 375px 到 800px 宽度时显示 -->
    <match-media :min-width="375" :max-width="800">
      <view class="responsive-box">宽度在 375px 到 800px 显示</view>
    </match-media>

    <!-- 高度大于 400px 且为横屏时显示 -->
    <match-media :min-height="400" :orientation="'landscape'">
      <view class="responsive-box">横屏且高度大于 400px 显示</view>
    </match-media>

    <!-- 高度在 600px 到 1200px 范围时显示 -->
    <match-media :min-height="600" :max-height="1200">
      <view class="responsive-box">高度在 600px 到 1200px 显示</view>
    </match-media>
  </view>
</template>

<style scoped>
/* 为响应式布局内容定义样式 */
.responsive-box {
  padding: 10px;
  margin: 10px 0;
  background-color: #f0f0f0;
  text-align: center;
  font-size: 16px;
}
</style>