媒体

媒体查询条件

1
2
3
1媒体类型 // 默认screen, 彩色屏幕
2逻辑操作符 // and、or、>、<、=
3媒体特征 // 指定设备范围, 包括设备状态、设备大小、设备名称

手机

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 1import { mediaquery } from '@kit.ArkUI';
 2
 3@Entry
 4@Component
 5struct Page02_Media {
 6  @State message: string = 'Hello World';
 7  @State message2: string = 'Hello World';
 8  // 检测竖屏
 9  private listener = mediaquery.matchMediaSync('(orientation: landscape)')
10  private listener2 = mediaquery.matchMediaSync('(320vp <= width < 600vp)')
11  onPortrait = (mediaQueryResult: mediaquery.MediaQueryResult) => {
12    if (mediaQueryResult.matches) {
13      console.log('横屏')
14      this.message = '横屏'
15    } else {
16      console.log('竖屏')
17      this.message = '竖屏'
18    }
19
20
21  }
22  onPhone = (mediaQueryResult: mediaquery.MediaQueryResult) => {
23    if (mediaQueryResult.matches) {
24      this.message2 = '手机'
25    } else {
26      this.message2 = '其他设备'
27    }
28  }
29
30  // 给listener绑定函数
31  aboutToAppear(): void {
32    this.listener.on('change', this.onPortrait)
33    this.listener2.on('change', this.onPhone)
34  }
35
36  build() {
37    Column() {
38      Text('媒体查询')
39      Text(this.message)
40      Text(this.message2)
41    }
42    .height('100%')
43    .width('100%')
44  }
45}

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12