1# 媒体查询
2
3>  **说明：**
4>
5>  - 从API version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
6>
7>  - media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。
8
9
10媒体查询（Media Query）应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。使用媒体查询针对设备和应用的属性信息，可以设计出相匹配的布局样式。
11
12
13## CSS语法规则
14
15使用@media来引入查询语句，具体规则如下：
16
17```
18@media [media-type] [and|or] [(media-feature)] {
19  CSS-Code;
20}
21```
22
23@media screen and (round-screen: true) { … } ： 当设备屏幕是圆形时条件成立
24
25@media (max-height: 454) { … } ：范围查询，CSS level 3 写法
26
27>  **说明：**
28>
29>  - 不支持<=，>=，<，>操作符;
30>  - api 9开始才支持多重 () 嵌套使用；
31>  - media语句整体长度不能超过 512 个字符；
32>  - 单个media条件长度不能超过32个字符；
33
34
35## 媒体类型
36
37| 类型     | 说明             |
38| ------ | -------------- |
39| screen | 按屏幕相关参数进行媒体查询。 |
40
41
42## 媒体逻辑操作
43
44媒体逻辑操作符：and、or<sup>9+</sup>用于构成媒体查询语句，详细解释说明如下表。
45
46**表1** 媒体逻辑操作符
47
48| 类型              | 说明                                       |
49| --------------- | ---------------------------------------- |
50| and             | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;liteWearable)&nbsp;and&nbsp;(max-height:&nbsp;454)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于454个像素单位时成立。 |
51| or<sup>9+</sup> | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;454) &nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于454个像素单位或者设备屏幕是圆形时，条件成立。 |
52
53
54
55
56## 媒体特征
57
58| 类型               | 说明                                       |
59| ---------------- | ---------------------------------------- |
60| height           | 应用页面显示区域的高度。                             |
61| min-height       | 应用页面显示区域的最小高度。                           |
62| max-height       | 应用页面显示区域的最大高度。                           |
63| width            | 应用页面显示区域的宽度。                             |
64| min-width        | 应用页面显示区域的最小宽度。                           |
65| max-width        | 应用页面显示区域的最大宽度。                           |
66| aspect-ratio     | 应用页面显示区域的宽度与高度的比值。<br/>例如：aspect-ratio: 1/2 |
67| min-aspect-ratio | 应用页面显示区域的宽度与高度的最小比值。                     |
68| max-aspect-ratio | 应用页面显示区域的宽度与高度的最大比值。                     |
69| round-screen     | 屏幕类型，圆形屏幕为 true，&nbsp;非圆形屏幕为&nbsp;false。 |
70
71
72## 通用媒体特征示例代码
73
74多个.container中的所写的属性个数以及类型需要相同，若不相同会导致显示异常。
75
76```html
77<!-- xxx.hml -->
78<div>
79  <div class="container">
80    <text class="title">Hello World</text>
81  </div>
82</div>
83```
84
85```css
86/* xxx.css */
87.container {
88  width: 300px;
89  height: 600px;
90  background-color: #008000;
91}
92.title {
93    font-size: 30px;
94    text-align: center;
95}
96@media (device-type: smartVision) {
97  .container {
98    width: 500px;
99    height: 500px;
100    background-color: #fa8072;
101  }
102}
103@media (device-type: liteWearable) {
104  .container {
105    width: 300px;
106    height: 300px;
107    background-color: #008b8b;
108  }
109}
110```
111