diff --git a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md index 2ec86346d050a4bebcc2c273f1dbca1bcfebb62a..ab7a1af81cfe8941f905b63ed9cad638a66ad77f 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md @@ -38,16 +38,20 @@ listener.on('change', onPortrait) [media-type] [and|not|only] [(media-feature)] ``` 例如： + screen and (round-screen: true) // 当设备屏幕是圆形时条件成立 + (max-height: 800) // 当高度小于800时条件成立 + (height <= 800) // 当高度小于800时条件成立 + screen and (device-type: tv) or (resolution < 2) // 包含多个媒体特征的多条件复杂语句查询 ### 媒体类型(media-type) - | 类型 | 说明 | -| -------- | -------- | -| screen | 按屏幕相关参数进行媒体查询。 | +| 类型 | 说明 | +| ------ | -------------- | +| screen | 按屏幕相关参数进行媒体查询。 | ### 媒体逻辑操作(and|not|only) @@ -56,48 +60,48 @@ screen and (device-type: tv) or (resolution < 2) // 包含多个媒体特征 **表1** 媒体逻辑操作符 -| 类型 | 说明 | -| -------- | -------- | -| and | 将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。
例如：screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 | -| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。
例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用not运算符时必须指定媒体类型。 | -| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：
screen and (min-height: 50)
老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用only时必须指定媒体类型。 | -| ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。
例如：screen and (min-height: 1000),  （round-screen：true） 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 | -| or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。
例如：screen and (max-height: 1000) or  （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 | +| 类型 | 说明 | +| -------- | ---------------------------------------- | +| and | 将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。
例如：screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 | +| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。
例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用not运算符时必须指定媒体类型。 | +| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：
screen and (min-height: 50)
老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用only时必须指定媒体类型。 | +| ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。
例如：screen and (min-height: 1000),  （round-screen：true） 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 | +| or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。
例如：screen and (max-height: 1000) or  （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 | 在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了<=，>=，<，>操作符。 **表2** 媒体逻辑范围操作符 -| 类型 | 说明 | -| -------- | -------- | -| <= | 小于等于，例如：screen and (50 <= height)。 | -| >= | 大于等于，例如：screen and (600 >= height)。 | -| < | 小于，例如：screen and (50 < height)。 | -| > | 大于，例如：screen and (600 > height)。 | +| 类型 | 说明 | +| ----- | ---------------------------------------- | +| <= | 小于等于，例如：screen and (50 <= height)。 | +| >= | 大于等于，例如：screen and (600 >= height)。 | +| < | 小于，例如：screen and (50 < height)。 | +| > | 大于，例如：screen and (600 > height)。 | ### 媒体特征(media-feature) - | 类型 | 说明 | -| -------- | -------- | -| height | 应用页面显示区域的高度。 | -| min-height | 应用页面显示区域的最小高度。 | -| max-height | 应用页面显示区域的最大高度。 | -| width | 应用页面显示区域的宽度。 | -| min-width | 应用页面显示区域的最小宽度。 | -| max-width | 应用页面显示区域的最大宽度。 | -| resolution | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：
- dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；
- dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；
- dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。 | -| min-resolution | 设备的最小分辨率。 | -| max-resolution | 设备的最大分辨率。 | -| orientation | 屏幕的方向。
可选值：
- orientation: portrait（设备竖屏）
- orientation: landscape（设备横屏） | -| device-height | 设备的高度。 | -| min-device-height | 设备的最小高度。 | -| max-device-height | 设备的最大高度。 | -| device-width | 设备的宽度。 | -| min-device-width | 设备的最小宽度。 | -| max-device-width | 设备的最大宽度。 | -| round-screen | 屏幕类型，圆形屏幕为true， 非圆形屏幕为 false。 | -| dark-mode | 系统为深色模式时为true，否则为false。 | +| 类型 | 说明 | +| ----------------- | ---------------------------------------- | +| height | 应用页面显示区域的高度。 | +| min-height | 应用页面显示区域的最小高度。 | +| max-height | 应用页面显示区域的最大高度。 | +| width | 应用页面显示区域的宽度。 | +| min-width | 应用页面显示区域的最小宽度。 | +| max-width | 应用页面显示区域的最大宽度。 | +| resolution | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：
- dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；
- dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；
- dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。 | +| min-resolution | 设备的最小分辨率。 | +| max-resolution | 设备的最大分辨率。 | +| orientation | 屏幕的方向。
可选值：
- orientation: portrait（设备竖屏）
- orientation: landscape（设备横屏） | +| device-height | 设备的高度。 | +| min-device-height | 设备的最小高度。 | +| max-device-height | 设备的最大高度。 | +| device-width | 设备的宽度。 | +| min-device-width | 设备的最小宽度。 | +| max-device-width | 设备的最大宽度。 | +| round-screen | 屏幕类型，圆形屏幕为true， 非圆形屏幕为 false。 | +| dark-mode | 系统为深色模式时为true，否则为false。 | ## 场景示例