丽水建设公司网站,怎么看网站用的什么cms,手机网站 焦点图,扁平化手机网站模板概述
媒体查询作为响应式设计的核心#xff0c;在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。媒体查询常用于下面两种场景#xff1a;
针对设备和应用的属性信息#xff08;比如显示区域、深浅色、分辨率#xff09;#xff0…概述
媒体查询作为响应式设计的核心在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。媒体查询常用于下面两种场景
针对设备和应用的属性信息比如显示区域、深浅色、分辨率设计出相匹配的布局
当屏幕发生动态改变时比如分屏、横竖屏切换同步更新应用的页面布局 速食版
1.定义好媒体查询的条件和保存的字段
export default class BreakpointConstants{//屏幕大小尺寸static readonly BREAKPOINT_SM:string smstatic readonly BREAKPOINT_MD:string mdstatic readonly BREAKPOINT_LG:string lg//保存进AppStorage的字段static readonly CURRENT_BREAKPOINT:string currentBreakpoint//媒体查询条件static readonly RANGE_SM:string (320vp width 600vp)static readonly RANGE_MD:string (600vp width 840vp)static readonly RANGE_LG:string (840vp width )}2.封装好工具类设置查询条件以及监听句柄 import mediaQuery from ohos.mediaquery
import BreakpointConstants from ../constants/BreakpointConstantsexport default class BreakpointSystem{private smListener:mediaQuery.MediaQueryListener mediaQuery.matchMediaSync(BreakpointConstants.RANGE_SM)private mdListener:mediaQuery.MediaQueryListener mediaQuery.matchMediaSync(BreakpointConstants.RANGE_MD)private lgListener:mediaQuery.MediaQueryListener mediaQuery.matchMediaSync(BreakpointConstants.RANGE_LG)smListenerCallback(result:mediaQuery.MediaQueryResult){if (result.matches) {AppStorage.SetOrCreate(BreakpointConstants.CURRENT_BREAKPOINT,BreakpointConstants.BREAKPOINT_SM)}}mdListenerCallback(result:mediaQuery.MediaQueryResult){if (result.matches) {AppStorage.SetOrCreate(BreakpointConstants.CURRENT_BREAKPOINT,BreakpointConstants.BREAKPOINT_MD)}}lgListenerCallback(result:mediaQuery.MediaQueryResult){if (result.matches) {AppStorage.SetOrCreate(BreakpointConstants.CURRENT_BREAKPOINT,BreakpointConstants.BREAKPOINT_LG)}}register(){this.smListener.on(change,this.smListenerCallback.bind(this))this.mdListener.on(change,this.mdListenerCallback.bind(this))this.lgListener.on(change,this.lgListenerCallback.bind(this))}unregister(){this.smListener.off(change,this.smListenerCallback.bind(this))this.mdListener.off(change,this.mdListenerCallback.bind(this))this.lgListener.off(change,this.lgListenerCallback.bind(this))}}3.使用封装的媒体查询工具类
import BreakpointSystem from ../common/utils/BreakpointSystem
import BreakpointConstants from ../common/constants/BreakpointConstantsStorageProp(currentBreakpoint) currentBreakpoint:string BreakpointConstants.BREAKPOINT_SM
private breakpointSystem:BreakpointSystem new BreakpointSystem()chooseBarPosition(){let p {sm: BarPosition.End,md: BarPosition.Start,lg: BarPosition.Start,}return p[this.currentBreakpoint]}aboutToAppear(){this.breakpointSystem.register()}aboutToDisappear(){this.breakpointSystem.unregister()}build() {//根据不同的屏幕尺寸来改编barPosition的值实现响应式布局Tabs({ barPosition: this.chooseBarPosition() }) {TabContent() {RecordIndex()}.tabBar(this.myTabar($r(app.string.tab_record),$r(app.media.ic_calendar),0))TabContent() {Text(发现)}.tabBar(this.myTabar($r(app.string.tab_discover),$r(app.media.discover),1))TabContent() {Text(我的主页)}.tabBar(this.myTabar($r(app.string.tab_user),$r(app.media.ic_user_portrait),2))}.width(100%).height(100%)//根据不同的屏幕尺寸来改编vertical的值实现横向布局与纵向布局的切换.vertical({sm:false,md:true,lg:true,}[this.chooseBarPosition()])} 引入与使用流程
媒体查询通过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, 将其组合起来详细解释说明如下
媒体逻辑操作符
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个像素单位或者设备屏幕是圆形时条件成立。
媒体范围操作符包括详细解释说明如下表。 媒体逻辑范围操作符 小于等于例如screen and (height 50)。 大于等于例如screen and (height 600)。 小于例如screen and (height 50)。 大于例如screen and (height 600)。 媒体特征media-feature 媒体特征包括应用显示区域的宽高、设备分辨率以及设备的宽高等属性详细说明如下。
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 场景示例 下例中使用媒体查询实现屏幕横竖屏切换时给页面文本应用添加不同的内容和样式
import mediaquery from ohos.mediaquery;
import window from ohos.window;
import common from ohos.app.ability.common;let portraitFunc null;Entry
Component
struct MediaQueryExample {State color: string #DB7093;State text: string Portrait;// 当设备横屏时条件成立listener mediaquery.matchMediaSync((orientation: landscape));// 当满足媒体查询条件时触发回调onPortrait(mediaQueryResult) {if (mediaQueryResult.matches) { // 若设备为横屏状态更改相应的页面布局this.color #FFD700;this.text Landscape;} else {this.color #DB7093;this.text Portrait;}}aboutToAppear() {// 绑定当前应用实例portraitFunc this.onPortrait.bind(this);// 绑定回调函数this.listener.on(change, portraitFunc);}// 改变设备横竖屏状态函数private changeOrientation(isLandscape: boolean) {// 获取UIAbility实例的上下文信息let context getContext(this) as common.UIAbilityContext;// 调用该接口手动改变设备横竖屏状态window.getLastWindow(context).then((lastWindow) {lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT)});}build() {Column({ space: 50 }) {Text(this.text).fontSize(50).fontColor(this.color)Text(Landscape).fontSize(50).fontColor(this.color).backgroundColor(Color.Orange).onClick(() {this.changeOrientation(true);})Text(Portrait).fontSize(50).fontColor(this.color).backgroundColor(Color.Orange).onClick(() {this.changeOrientation(false);})}.width(100%).height(100%)}
}
