ContextQMD
Back to Uni App

Match Media

docs/component/match-media.md

2.3.36.0 KB
Original Source
<!-- ## match-media -->

::: sourceCode

match-media

GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-match-media

GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-match-media

:::

media query 匹配检测节点

宽屏适配指南另见：详情

兼容性

Web微信小程序AndroidiOSHarmonyOSHarmonyOS(Vapor)
<a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a>4.414.715.04.715.0

属性

名称类型默认值兼容性描述
widthnumber-Web: x; 微信小程序: 4.41; Android: 4.71; iOS: 5.0; HarmonyOS: 4.71; HarmonyOS(Vapor): 5.0页面宽度（px 为单位）
min-widthnumber-Web: x; 微信小程序: 4.41; Android: 4.71; iOS: 5.0; HarmonyOS: 4.71; HarmonyOS(Vapor): 5.0页面最小宽度（px 为单位）
max-widthnumber-Web: x; 微信小程序: 4.41; Android: 4.71; iOS: 5.0; HarmonyOS: 4.71; HarmonyOS(Vapor): 5.0页面最大宽度（px 为单位）
heightnumber-Web: x; 微信小程序: 4.41; Android: 4.71; iOS: 5.0; HarmonyOS: 4.71; HarmonyOS(Vapor): 5.0页面高度（px 为单位）
min-heightnumber-Web: x; 微信小程序: 4.41; Android: 4.71; iOS: 5.0; HarmonyOS: 4.71; HarmonyOS(Vapor): 5.0页面最小高度（px 为单位）
max-heightnumber-Web: x; 微信小程序: 4.41; Android: 4.71; iOS: 5.0; HarmonyOS: 4.71; HarmonyOS(Vapor): 5.0页面最大高度（px 为单位）
orientationportrait | landscape-Web: x; 微信小程序: 4.41; Android: 4.71; iOS: 5.0; HarmonyOS: 4.71; HarmonyOS(Vapor): 5.0屏幕方向

orientation 的属性描述

合法值兼容性描述
portraitWeb: x; 微信小程序: 4.41; Android: 4.71; iOS: 5.0; HarmonyOS: 4.71; HarmonyOS(Vapor): 5.0竖屏
landscapeWeb: x; 微信小程序: 4.41; Android: 4.71; iOS: 5.0; HarmonyOS: 4.71; HarmonyOS(Vapor): 5.0横屏
<!-- UTSCOMJSON.match-media.component_type -->

示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

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

::: preview

appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/match-media/match-media

uvue
<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>

:::

参见