match-media

# match-media

media query 匹配检测节点

# 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
x	4.41	4.71	x	4.71

# 属性

名称

类型

默认值

兼容性

描述

width

number

页面宽度（px 为单位）

min-width

number

页面最小宽度（px 为单位）

max-width

number

页面最大宽度（px 为单位）

height

number

页面高度（px 为单位）

min-height

number

页面最小高度（px 为单位）

max-height

number

页面最大高度（px 为单位）

orientation

portrait | landscape

屏幕方向

合法值

兼容性

描述

portrait

竖屏

landscape

横屏

# 示例

hello uni-app x

该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验

<template>
  <view class="container">
    <view class="section">
      <text class="subtitle">基础条件匹配</text>

      <match-media min-width="400">
        <view class="demo-box">屏幕宽度 ≥ 400px 时显示</view>
      </match-media>

      <match-media max-width="600">
        <view class="demo-box">屏幕宽度 ≤ 600px 时显示</view>
      </match-media>

      <match-media width="375">
        <view class="demo-box">屏幕宽度 = 375px 时显示</view>
      </match-media>

      <match-media min-height="600">
        <view class="demo-box">屏幕高度 ≥ 600px 时显示</view>
      </match-media>

      <match-media max-height="800">
        <view class="demo-box">屏幕高度 ≤ 800px 时显示</view>
      </match-media>

      <match-media height="667">
        <view class="demo-box">屏幕高度 = 667px 时显示</view>
      </match-media>

      <match-media orientation="portrait">
        <view class="demo-box">竖屏 时显示</view>
      </match-media>
      <match-media orientation="landscape">
        <view class="demo-box">横屏 时显示</view>
      </match-media>
    </view>
    <view class="section">
      <text class="subtitle">组合条件匹配</text>

      <match-media min-width="500" max-width="1000" orientation="landscape">
        <view class="demo-box">横屏 且宽度在 500px ~ 1000px 时显示</view>
      </match-media>

      <match-media min-height="200" max-height="800" orientation="portrait">
        <view class="demo-box">竖屏 且高度在 200px ~ 800px 时显示</view>
      </match-media>

      <match-media min-width="300" max-width="900" min-height="400" max-height="800" orientation="portrait">
        <view class="demo-box">竖屏 且宽度在 300px ~ 900px，高度在 400px ~ 800px 时显示</view>
      </match-media>
    </view>
  </view>
</template>

<style>
  .container {
    padding: 20px;
  }

  .section {
    padding-top: 5px;
  }

  .subtitle {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .demo-box {
    padding: 5px 0;
  }
</style>