简体中文

下载 App

输入关键字搜索

开发者能力认证

鸿蒙高校创新赛

HarmonyOS 7

animation

HarmonyOS行业解决方案

layoutWeight

HarmonyOS模板&组件

bindPopup

bindsheet

CTRL+K

文档管理中心

我的

Hello，

欢迎来到开发者联盟

MediaQuery响应式布局能力

更新时间: 2024-03-07 06:41

本文导读

css语法规则

媒体类型（Media Type）

媒体逻辑操作（Media Logical Operator）

媒体特征（Media Feature）

css语法规则

@ media方式引入媒体查询
收起
自动换行
深色代码主题
复制
```
@media [media type] [and|not|only] [(media feature)] {
    CSS-Code;
}
```
例如：

@media (max-width: 30) { ... } // level3的写法。

@media (width <= 30) { ... } // level4的写法，比level3更清晰简洁。

@media screen and (min-width: 400) and (max-width: 700) { … } //多条件写法。

@media (400 <= width <= 700) {… } // 多条件level4写法。
@import 方式引入媒体查询
收起
自动换行
深色代码主题
复制
```
@import ‘./css_file_name.css’ [media type] [and|not|only] [(media feature)];
```
例如：@import './style.css' screen and (min-width: 400) and (max-width: 700);

媒体类型（Media Type）

展开

类型	说明
screen	主要用于屏幕。

媒体逻辑操作（Media Logical Operator）

展开

类型	说明
and	and运算符用于将多个媒体特征（Media Feature）组合到一个媒体查询中，要求每个特征都返回true，以使查询成立。另外它也可以用于加入媒体类型。例如：screen and (min-width: 400) and (max-width: 700)
not	not运算符用于否定媒体查询，如果条件不成立返回true，否则返回false。如果存在于以逗号分隔的查询列表中，则它将仅取消应用它的特征查询。另外，如果使用not运算符，还必须指定媒体类型。例如：not screen and (min-width: 400) and (max-width: 700)
only	only是为了在不支持媒体查询的浏览器中隐藏样式表，浏览器处理以only开头的关键词时将会忽略only。如果使用only运算符，必须指定媒体类型。例如：only screen and (min-width: 400) and (max-width: 700)
,(comma)	逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。例如：screen and (min-width: 400), (max-width: 700)
or	or运算符用于将多个媒体特征比较语句组合到一个媒体查询语句中，只要有其中一条媒体特征比较语句返回true，查询成立。例如：screen and (min-width: 400) or (max-width: 700)
<=	小于等于。例如：screen and (400 <= width)
>=	大于等于。例如：screen and (400 >= width)
<	小于。例如：screen and (400 < width)
>	大于。例如：screen and (400 > width)

媒体特征（Media Feature）

注意

以下尺寸都是设备的真实尺寸大小、物理像素和真实的屏幕分辨率。

展开

类型	说明
height	定义输出设备中的页面可见区域高度。使用时，需要将manifest.json文件中minPlatformVersion配置为1075及以上版本。
min-height	定义输出设备中的页面最小可见区域高度。使用时，需要将manifest.json文件中minPlatformVersion配置为1075及以上版本。
max-height	定义输出设备中的页面最大可见区域高度。使用时，需要将manifest.json文件中minPlatformVersion配置为1075及以上版本。
width	定义输出设备中的页面可见区域宽度。使用时，需要将manifest.json文件中minPlatformVersion配置为1075及以上版本。
min-width	定义输出设备中的页面最小可见区域宽度。使用时，需要将manifest.json文件中minPlatformVersion配置为1075及以上版本。
max-width	定义输出设备中的页面最大可见区域宽度。使用时，需要将manifest.json文件中minPlatformVersion配置为1075及以上版本。
resolution	定义设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示，支持dpi dppx 或者 dpcm 单位。其中1dppx = 96dpi，1dpcm ≈ 2.54dpi 例如：resolution:96dpi、resolution:1dppx、resolution:36dpcm。使用时，需要将manifest.json文件中minPlatformVersion配置为1077及以上版本。
min-resolution	定义设备的最小分辨率。
max-resolution	定义设备的最大分辨率。
orientation	定义输出设备屏幕高度是否大于或等于宽度。可选值：orientation: portrait、orientation:landscape。
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率。例如：aspect-ratio:1/1
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
max-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最大比率。
device-height	定义输出设备高度。
min-device-height	定义输出设备最小高度。
max-device-height	定义输出设备最大高度。
device-width	定义输出设备宽度。
min-device-width	定义输出设备最小宽度。
max-device-width	定义输出设备最大宽度。
access-type	定义输出设备的接入媒体类型，快应用场景中默认值为“fastapp”，卡片场景中默认为“card”，也可以由接入媒体自定义，例如“hiboard”（为华为定制属性，非厂商联盟规范）。
prefers-color-scheme（1073+）	检测用户的系统主题，仅对有深色模式的机型生效。支持属性包括： light：日间模式 dark：夜间模式

示例代码

通用媒体特征示例代码：

收起
自动换行
深色代码主题
复制
<template>
    <div>
    </div>
</template>
<style>
.container {
    width: 500px;
    height: 500px;
    background-color:#FF0000;
}
@media (orientation: landscape) {
    .container {
        width: 500px;
        height: 800px;
        background-color:#00FF00;
    }
}
@media (orientation: portrait) {
    .container {
        width: 500px;
        height: 500px;
        background-color:#0000FF;
    }
}
</style>

Access-type特征示例代码：

收起
自动换行
深色代码主题
复制
<template>
  <div>
  </div>
</template>
<style>
.container {
  width: 500px;
  height: 500px;
  background-color:#FF0000;
}
@media (access-type: card) {
  .container {
    width: 100px;
    height: 500px;
    background-color:#00FF00;
  }
}
@media (access-type: fastapp) {
  .container {
    width: 500px;
    height: 1000px;
    background-color:#0000FF;
  }
}
</style>

MediaQuery响应式布局能力

css语法规则

媒体类型（Media Type）

媒体逻辑操作（Media Logical Operator）

媒体特征（Media Feature）

相关链接

FAQ