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)

参考文档

媒体查询