鸿蒙HarmonyOS开发（5.0 Beta）通用媒体查询规范

媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能：

1. 针对设备和应用的属性信息，可以设计出相匹配的布局样式。

2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。

CSS语法规则

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

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

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

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

@media (height <= 800) { … } ：范围查询，CSS level 4 写法，与CSS level3写法等价

@media screen and (device-type: tv) or (resolution < 2) { … } ： 同时包含媒体类型和多个媒体特征的多条件复杂语句查询

页面中引用资源

通过@import方式引入媒体查询，具体使用方法如下：

@import url [media-type] [and|not|only] [(media-feature)];

例如：

@import '../common/style.css' screen and (min-width: 600) and (max-width: 1200);

媒体类型