鸿蒙5.0开发进阶：JS组件-媒体查询

最新推荐文章于 2025-12-02 00:52:42 发布

原创最新推荐文章于 2025-12-02 00:52:42 发布 · 955 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #android #鸿蒙系统 #ArkUI #javascript #ArkTS

鸿蒙开发同时被 3 个专栏收录

1065 篇文章

订阅专栏

ArkUI

762 篇文章

订阅专栏

ArkTS

556 篇文章

订阅专栏

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

媒体查询

说明

从API version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。

媒体查询（Media Query）应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。使用媒体查询针对设备和应用的属性信息，可以设计出相匹配的布局样式。

CSS语法规则

使用@media来引入查询语句，具体规则如下：

@media [media-type] [and|or] [(media-feature)] {
  CSS-Code;
}

@media screen and (round-screen: true) { … } ：当设备屏幕是圆形时条件成立

@media (max-height: 454) { … } ：范围查询，CSS level 3 写法

说明

不支持<=，>=，<，>操作符;
api 9开始才支持多重 () 嵌套使用；
media语句整体长度不能超过 512 个字符；
单个media条件长度不能超过32个字符；

媒体类型

类型	说明
screen	按屏幕相关参数进行媒体查询。

媒体逻辑操作

媒体逻辑操作符：and、or9+用于构成媒体查询语句，详细解释说明如下表。

表1 媒体逻辑操作符

类型	说明
and	将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。例如：screen and (device-type: liteWearable) and (max-height: 454) 表示当设备类型是智能穿戴同时应用的最大高度小于等于454个像素单位时成立。
or9+	将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。例如：screen and (max-height: 454) or （round-screen：true）表示当应用高度小于等于454个像素单位或者设备屏幕是圆形时，条件成立。

类型

说明

and

将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。

例如：screen and (device-type: liteWearable) and (max-height: 454) 表示当设备类型是智能穿戴同时应用的最大高度小于等于454个像素单位时成立。

or9+

将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。

例如：screen and (max-height: 454) or （round-screen：true）表示当应用高度小于等于454个像素单位或者设备屏幕是圆形时，条件成立。

媒体特征

类型	说明
height	应用页面显示区域的高度。
min-height	应用页面显示区域的最小高度。
max-height	应用页面显示区域的最大高度。
width	应用页面显示区域的宽度。
min-width	应用页面显示区域的最小宽度。
max-width	应用页面显示区域的最大宽度。
aspect-ratio	应用页面显示区域的宽度与高度的比值。例如：aspect-ratio: 1/2
min-aspect-ratio	应用页面显示区域的宽度与高度的最小比值。
max-aspect-ratio	应用页面显示区域的宽度与高度的最大比值。
round-screen	屏幕类型，圆形屏幕为 true，非圆形屏幕为 false。

通用媒体特征示例代码

多个.container中的所写的属性个数以及类型需要相同，若不相同会导致显示异常。

<!-- xxx.hml -->
<div>
  <div class="container">
    <text class="title">Hello World</text>
  </div>
</div>

/* xxx.css */
.container {
  width: 300px;
  height: 600px;
  background-color: #008000;
}
.title {
    font-size: 30px;
    text-align: center;
}
@media (device-type: smartVision) {
  .container {
    width: 500px;
    height: 500px;
    background-color: #fa8072;
  }
} 
@media (device-type: liteWearable) {
  .container {
    width: 300px;
    height: 300px;
    background-color: #008b8b;
  }
}