EveryLike/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>