品牌设计广告公司seo关键词排名工具

当前位置： 首页 > news >正文

品牌设计广告公司,seo关键词排名工具,WORDPRESS论坛文章阅读统计插件,厦门市建设路网站文章目录 概述引入与使用流程媒体查询条件语法规则媒体类型#xff08;media-type#xff09;媒体逻辑操作#xff08;media-logic-operations#xff09;媒体特征#xff08;media-feature#xff09; 场景示例1、监听设备屏幕的方向#xff08;竖屏#xff0c;横屏media-type媒体逻辑操作media-logic-operations媒体特征media-feature 场景示例1、监听设备屏幕的方向竖屏横屏2、监听设备尺寸变化xssmmdlg 概述 媒体查询作为响应式设计的核心在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。 媒体查询常用于下面两种场景 针对设备和应用的属性信息比如显示区域、深浅色、分辨率设计出相匹配的布局。当屏幕发生动态改变时比如分屏、横竖屏切换同步更新应用的页面布局。 引入与使用流程 媒体查询通过mediaquery模块接口设置查询条件并绑定回调函数在对应的条件的回调函数里更改页面布局或者实现业务逻辑实现页面的响应式设计。具体步骤如下 首先导入媒体查询模块。 import mediaquery from ohos.mediaquery;通过matchMediaSync接口设置媒体查询条件保存返回的条件监听句柄listener。例如监听横屏事件 let listener mediaquery.matchMediaSync((orientation: landscape));给条件监听句柄listener绑定回调函数onPortrait当listener检测设备状态变化时执行回调函数。 在回调函数内根据不同设备状态更改页面布局或者实现业务逻辑。 onPortrait(mediaQueryResult) {if (mediaQueryResult.matches) {// do something here} else {// do something here} }listener.on(change, onPortrait);媒体查询条件 媒体查询条件由媒体类型、逻辑操作符、媒体特征组成其中媒体类型可省略逻辑操作符用于连接不同媒体类型与媒体特征其中媒体特征要使用“()”包裹且可以有多个。具体规则如下 语法规则 语法规则包括媒体类型media-type、媒体逻辑操作media-logic-operations和媒体特征media-feature。 [media-type] [media-logic-operations] [(media-feature)]例如 screen and (round-screen: true) 表示当设备屏幕是圆形时条件成立。 (max-height: 800) 表示当高度小于等于800vp时条件成立。 (height 800) 表示当高度小于等于800vp时条件成立。 screen and (device-type: tv) or (resolution 2)表示包含多个媒体特征的多条件复杂语句查询当设备类型为tv或设备分辨率小于2时条件成立。
媒体类型media-type 类型说明screen按屏幕相关参数进行媒体查询。 媒体逻辑操作media-logic-operations 媒体逻辑操作符and、or、not、only用于构成复杂媒体查询也可以通过comma, 将其组合起来详细解释说明如下表。 表1 媒体逻辑操作符 类型说明and将多个媒体特征Media Feature以“与”的方式连接成一个媒体查询只有当所有媒体特征都为true查询条件成立。另外它还可以将媒体类型和媒体功能结合起来。例如screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴且应用的最大高度小于等于600个像素单位时成立。or将多个媒体特征以“或”的方式连接成一个媒体查询如果存在结果为true的媒体特征则查询条件成立。例如screen and (max-height: 1000) or (round-screen: true) 表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时条件成立。not取反媒体查询结果媒体查询结果不成立时返回true否则返回false。例如not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。使用not运算符时必须指定媒体类型。only当整个表达式都匹配时才会应用选择的样式可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义比如screen and (min-height: 50)。老版本浏览器会将这句话理解成screen从而导致仅仅匹配到媒体类型screen就应用了指定样式使用only可以很好地规避这种情况。使用only时必须指定媒体类型。comma, 将多个媒体特征以“或”的方式连接成一个媒体查询如果存在结果为true的媒体特征则查询条件成立。其效果等同于or运算符。例如screen and (min-height: 1000), (round-screen: true) 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时条件成立。 媒体范围操作符包括详细解释说明如下表。 表2 媒体逻辑范围操作符 类型说明小于等于例如screen and (height 50)。大于等于例如screen and (height 600)。小于例如screen and (height 50)。大于例如screen and (height 600)。 媒体特征media-feature 媒体特征包括应用显示区域的宽高、设备分辨率以及设备的宽高等属性详细说明如下表。 表3 媒体特征说明表 类型说明height应用页面可绘制区域的高度。min-height应用页面可绘制区域的最小高度。max-height应用页面可绘制区域的最大高度。width应用页面可绘制区域的宽度。min-width应用页面可绘制区域的最小宽度。max-width应用页面可绘制区域的最大宽度。resolution设备的分辨率支持dpidppx和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设备的宽度。device-type设备的类型。可选值default、tablet。min-device-width设备的最小宽度。max-device-width设备的最大宽度。round-screen屏幕类型圆形屏幕为true非圆形屏幕为false。dark-mode系统为深色模式时为true否则为false。 场景示例 1、监听设备屏幕的方向竖屏横屏 import mediaquery from ohos.mediaquery;Entry Component struct MediaQueryExample {State color: string #DB7093;State text: string 设备竖屏;// 当设备横屏时条件成立listener mediaquery.matchMediaSync((orientation: landscape));// 当满足媒体查询条件时触发回调onPortrait(mediaQueryResult) {if (mediaQueryResult.matches) { // 若设备为横屏状态更改相应的页面布局this.color #FFD700;this.text 设备横屏;} else {this.color #DB7093;this.text 设备竖屏;}}aboutToAppear() {// 绑定回调函数this.listener.on(change, this.onPortrait.bind(this));}build() {Column() {Text(this.text).fontSize(50).fontColor(this.color).margin({top:50})}.width(100%).height(100%)} }2、监听设备尺寸变化xssmmdlg 工具类BreakpointSystem // utils/BreakpointSystem.etsimport mediaQuery from ohos.mediaquery;export class BreakpointSystem {private currentBreakpoint: string sm;private xsListener: mediaQuery.MediaQueryListener;private smListener: mediaQuery.MediaQueryListener;private mdListener: mediaQuery.MediaQueryListener;private lgListener: mediaQuery.MediaQueryListener;public register(): void {this.xsListener mediaQuery.matchMediaSync((width320vp));this.xsListener.on(change, this.isBreakpointXS);this.smListener mediaQuery.matchMediaSync((320vpwidth600vp));this.smListener.on(change, this.isBreakpointSM);this.mdListener mediaQuery.matchMediaSync((600vpwidth840vp));this.mdListener.on(change, this.isBreakpointMD);this.lgListener mediaQuery.matchMediaSync((840vpwidth));this.lgListener.on(change, this.isBreakpointLG);}public unregister(): void {this.xsListener.off(change, this.isBreakpointXS);this.smListener.off(change, this.isBreakpointSM);this.mdListener.off(change, this.isBreakpointMD);this.lgListener.off(change, this.isBreakpointLG);}private isBreakpointXS (mediaQueryResult: mediaQuery.MediaQueryResult): void {if (mediaQueryResult.matches) {this.updateCurrentBreakpoint(xs);}}private isBreakpointSM (mediaQueryResult: mediaQuery.MediaQueryResult): void {if (mediaQueryResult.matches) {this.updateCurrentBreakpoint(sm);}}private isBreakpointMD (mediaQueryResult: mediaQuery.MediaQueryResult): void {if (mediaQueryResult.matches) {this.updateCurrentBreakpoint(md);}}private isBreakpointLG (mediaQueryResult: mediaQuery.MediaQueryResult): void {if (mediaQueryResult.matches) {this.updateCurrentBreakpoint(lg);}}private updateCurrentBreakpoint(breakpoint: string): void {if (this.currentBreakpoint ! breakpoint) {this.currentBreakpoint breakpoint;AppStorage.SetOrCreatestring(currentBreakpoint, this.currentBreakpoint);}} }使用工具类监听设备尺寸 // mediaQuery.etsimport { BreakpointSystem } from ../utils/BreakpointSystemEntry Component struct MediaQueryExample {StorageProp(currentBreakpoint) currentBreakpoint: string smprivate breakpointSystem: BreakpointSystem new BreakpointSystem();aboutToAppear() {// 注册监听this.breakpointSystem.register()}aboutToDisappear() {// 移除监听this.breakpointSystem.unregister()}build() {Column() {Text(this.currentBreakpoint).fontSize(50).margin({ top: 50 })}.width(100%).height(100%)} }