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