How ArkUI adapter somehow the screen

大家都知道,Our mobile phones often have horizontal and vertical screen switching to function,This time for some styles,We have to do some different adaptations,那么,我们如何实现这个功能呢,其实很简单,The first thing we need to do is a media query.

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

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

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

如何使用

By calling the media query interface,Set the media query condition and the callback function of the query result,Change the page layout or implement business logic in the callback function of the corresponding condition.

First import the media query module,例如：

import mediaquery from '@ohos.mediaquery'

然后通过matchMediaSyncThe interface sets media query conditions,And save the returned conditional listener handle,例如：

listener = mediaquery.matchMediaSync('(orientation: landscape)')

Finally, listen to the handle through the condition saved abovelistenerto register callbacks函数,Change the page layout or implement business logic in the callback function,This callback function is fired when the media query condition is matched,例如：

  import mediaquery from '@ohos.mediaquery'    let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //Listen for horizontal screen events  function onPortrait(mediaQueryResult) {      if (mediaQueryResult.matches) {        //你的逻辑      this.islandscape = true      } else {          //你的逻辑      this.islandscape = false      }  }  this.listener.on('change', this.onPortrait) // 注册回调  this.listener.off('change', this.onPortrait) // to register callbacks

例子：

import mediaquery from '@ohos.mediaquery'​let portraitFunc = null​@[email protected] MediaQueryExample {  @State islandscape: boolean = false  listener = mediaquery.matchMediaSync('(orientation: landscape)')​  onPortrait(mediaQueryResult) {    if (mediaQueryResult.matches) {      this.islandscape = true    } else {      this.islandscape = false    }  }​  aboutToAppear() {    portraitFunc = this.onPortrait.bind(this) //bind current js instance    this.listener.on('change', portraitFunc)  }​  build() {    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {​      Text( this.islandscape==true ? "横屏显示":   "竖屏显示")        .backgroundColor(Color.Blue)        .textAlign(TextAlign.Center)        .fontSize('50fp')        .fontColor(Color.White)        .width('100%')        .height('100vp')​    }    .width('100%').height('100%')  }}

Media query condition syntax rules

[media-type] [and|not|only] [(media-feature)]

例如：

screen and (round-screen: true) ：The condition is true when the device screen is circular

(max-height: 800) ：when the height is less than 800时条件成立

(height <= 800) ：when the height is less than 800时条件成立

screen and (device-type: tv) or (resolution < 2) ：Multi-condition complex statement query containing multiple media features

媒体特征(media-feature)

类型	说明
height	The height of the display area of ​​the application page.
min-height	The minimum height of the display area of ​​the application page.
max-height	The maximum height of the display area of ​​the application page.
width	The width of the display area of ​​the application page.
min-width	Applies the minimum width of the page display area.
max-width	The maximum width of the display area of ​​the application page.
resolution	设备的分辨率,支持dpi,dppx和dpcm单位.其中：- dpiIndicates the number of physical pixels per inch,1dpi≈0.39dpcm;- dpcmIndicates the number of physical pixels per centimeter,1dpcm ≈ 2.54dpi;- dppx表示每个pxThe number of physical pixels in （Press this unit96px=1inches as a reference,与页面中的pxUnits are calculated differently）,1dppx = 96dpi.
min-resolution	设备的最小分辨率.
max-resolution	设备的最大分辨率.
orientation	屏幕的方向.可选值：- orientation: portrait（Device vertical screen）- orientation: landscape（The device is in landscape orientation）
device-height	设备的高度.
min-device-height	The minimum height of the device.
max-device-height	The maximum height of the device.
device-width	设备的宽度.
min-device-width	The minimum width of the device.
max-device-width	The maximum width of the device.
round-screen	屏幕类型,The circular screen istrue, Non-circular screens are false.
dark-mode	When the system is in dark modetrue,否则为false.

参考文档

媒体查询