【HarmonyOS开发】通过媒体查询，实现一次开发，多端部署
媒体查询（Media Queries）是一种在CSS中使用的技术，用于根据设备的特性和属性（如屏幕宽度、设备类型等）来应用不同的样式规则。通过媒体查询，可以根据不同的设备或屏幕尺寸为用户提供优化的布局和样式。
1、Web中CSS的媒体查询
1.1 根据屏幕宽度应用样式
@media screen and (max-width: 768px) {
/* 当屏幕宽度小于等于 768px 时应用的样式 */
/* 适用于移动设备或小屏幕 */
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 当屏幕宽度在 769px 到 1024px 之间时应用的样式 */
/* 适用于平板设备或中等屏幕 */
}
@media screen and (min-width: 1025px) {
/* 当屏幕宽度大于等于 1025px 时应用的样式 */
/* 适用于桌面设备或大屏幕 */
}1.2 根据设备类型应用样式
@media screen and (orientation: landscape) {
/* 当设备处于横向（landscape）方向时应用的样式 */
}
@media screen and (orientation: portrait) {
/* 当设备处于纵向（portrait）方向时应用的样式 */
}
@media print {
/* 在打印时应用的样式 */
}1.3 组合多个条件的媒体查询
@media screen and (min-width: 768px) and (max-width: 1024px),
(orientation: portrait) {
/* 当屏幕宽度在 768px 到 1024px 之间或设备处于纵向方向时应用的样式 */
}2、Web中JS的媒体查询
可以使用window.matchMedia()方法来执行媒体查询，并根据查询结果执行相应的操作。这个方法返回一个MediaQueryList对象，该对象具有matches属性，表示查询是否匹配。将查询的结果存储在Window全局变量即可。
// 创建一个媒体查询对象
var mediaQuery = window.matchMedia('(max-width: 768px)');
// 检查媒体查询的匹配状态
if (mediaQuery.matches) {
// 当媒体查询匹配时执行的操作
// 适用于移动设备或小屏幕
console.log('Media query matches!');
} else {
// 当媒体查询不匹配时执行的操作
// 适用于平板设备或大屏幕
console.log('Media query does not match!');
}
// 添加一个媒体查询监听器
mediaQuery.addListener(function(mediaQueryList) {
if (mediaQueryList.matches) {
// 当媒体查询匹配时执行的操作
console.log('Media query matches!');
} else {
// 当媒体查询不匹配时执行的操作
console.log('Media query does not match!');
}
});3、Vue/React中的媒体查询
3.1 Vue中使用媒体查询
3.1.1 计算属性
Content goes here
3.1.2 三方库（vue-mq）
- vue-mq（以这个为例）
- vue-breakpoint-component
- vue-responsive
- vue-media-query-mixin
npm install vue-mq// main.js中配置
import { createApp } from 'vue';
import App from './App.vue';
import VueMq from 'vue-mq';
const app = createApp(App);
app.use(VueMq, {
breakpoints: {
mobile: 768,
tablet: 1024,
desktop: 1280,
// 根据需要添加其他断点
}
});
app.mount('#app');
// 使用
Content goes here
3.2 React中使用媒体查询（三方库）
- react-responsive（以这个为主）
- react-responsive-hooks
- react-media
- react-match-media
import React from 'react';
import styles from './MyComponent.module.css';
import { useMediaQuery } from 'react-responsive';
const MyComponent = () => {
const isSmallScreen = useMediaQuery({ maxWidth: 768 });
const isMediumScreen = useMediaQuery({ minWidth: 769, maxWidth: 1024 });
const isLargeScreen = useMediaQuery({ minWidth: 1025 });
return (
Content goes here
);
};
export default MyComponent;4、Harmony中的媒体查询
鸿蒙中主要通过 @ohos.mediaquery 实现媒体查询，进行断点
// 参考：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-mediaquery-0000001478181613-V3#ZH-CN_TOPIC_0000001573928789__mediaquerymatchmediasync
import mediaquery from '@ohos.mediaquery'4.1 封装媒体查询方法（.ts）
import mediaQuery from '@ohos.mediaquery'
class BreakpointSystem {
private currentBreakpoint: string = 'md'
private smListener: mediaQuery.MediaQueryListener
private mdListener: mediaQuery.MediaQueryListener
private lgListener: mediaQuery.MediaQueryListener
private updateCurrentBreakpoint(breakpoint: string) {
if (this.currentBreakpoint !== breakpoint) {
this.currentBreakpoint = breakpoint
AppStorage.Set('currentBreakpoint', this.currentBreakpoint)
}
console.log('======currentBreakpoint======', this.currentBreakpoint)
}
private isBreakpointSM = (mediaQueryResult) => {
if (mediaQueryResult.matches) {
this.updateCurrentBreakpoint('sm')
}
}
private isBreakpointMD = (mediaQueryResult) => {
if (mediaQueryResult.matches) {
this.updateCurrentBreakpoint('md')
}
}
private isBreakpointLG = (mediaQueryResult) => {
if (mediaQueryResult.matches) {
this.updateCurrentBreakpoint('lg')
}
}
public register() {
this.smListener = mediaQuery.matchMediaSync('(320vp<=width<600vp)')
this.smListener.on('change', this.isBreakpointSM)
this.mdListener = mediaQuery.matchMediaSync('(600vp<=width<840vp)')
this.mdListener.on('change', this.isBreakpointMD)
this.lgListener = mediaQuery.matchMediaSync('(840vp<=width)')
this.lgListener.on('change', this.isBreakpointLG)
}
public unregister() {
this.smListener.off('change', this.isBreakpointSM)
this.mdListener.off('change', this.isBreakpointMD)
this.lgListener.off('change', this.isBreakpointLG)
}
}
export default new BreakpointSystem() 4.2 使用封装的函数
4.2.1 轮播图中使用
import breakpointSystem from '../common/BreakpointSystem'
@Component
export default struct IndexSwiper {
@StorageProp('currentBreakpoint') currentBreakpoint: string = 'md'
@Builder swiperItem(imageSrc) {
Image(imageSrc)
.width('100%')
.aspectRatio(2.5)
.objectFit(ImageFit.Fill)
}
aboutToAppear() {
breakpointSystem.register()
}
aboutToDisappear() {
breakpointSystem.unregister()
}
build() {
Swiper() {
this.swiperItem($r('app.media.ic_public_swiper1'))
this.swiperItem($r('app.media.ic_public_swiper2'))
this.swiperItem($r('app.media.ic_public_swiper3'))
this.swiperItem($r('app.media.ic_public_swiper1'))
this.swiperItem($r('app.media.ic_public_swiper2'))
this.swiperItem($r('app.media.ic_public_swiper3'))
}
.autoPlay(true)
.indicator(false)
.itemSpace(10)
.displayCount(this.currentBreakpoint === 'sm' ? 1 : (this.currentBreakpoint === 'md' ? 2 : 3))
.width('100%')
.padding({ left: 12, right: 12, bottom: 16, top: 16 })
}
}4.2.2 TarBar中使用
import breakpointSystem from '../common/BreakpointSystem'
@Entry
@Component
struct Index {
@State currentIndex: number = 0
@StorageProp('currentBreakpoint') currentBreakpoint: string = 'md'
private onTabChange = (index: number) => {
this.currentIndex = index
}
aboutToAppear() {
breakpointSystem.register()
}
aboutToDisappear() {
breakpointSystem.unregister()
}
@Builder
tabItem(index: number, title: Resource, icon: Resource, iconSelected: Resource) {
TabBarItem({
index: index,
currentIndex: this.currentIndex,
title: title,
icon: icon,
iconSelected: iconSelected
})
}
build() {
Tabs({ barPosition: this.currentBreakpoint === 'lg' ? BarPosition.Start : BarPosition.End }) {
TabContent() {
Home()
}
.tabBar(this.tabItem(0, $r('app.string.tabBar1'), $r('app.media.ic_home_normal'), $r('app.media.ic_home_actived')))
TabContent() {
}
.tabBar(this.tabItem(1, $r('app.string.tabBar2'), $r('app.media.ic_app_normal'), $r('app.media.ic_app_actived')))
TabContent() {
}
.tabBar(this.tabItem(2, $r('app.string.tabBar3'), $r('app.media.ic_game_normal'), $r('app.media.ic_mine_actived')))
TabContent() {
}
.tabBar(this.tabItem(3, $r('app.string.tabBar4'), $r('app.media.ic_search_normal'), $r('app.media.ic_search_actived')))
}
.barWidth(this.currentBreakpoint === 'lg' ? 96 : '100%')
.barHeight(this.currentBreakpoint === 'lg' ? '60%' : 56)
.vertical(this.currentBreakpoint === 'lg')
.onChange(this.onTabChange)
.backgroundColor('#F1F3F5')
}
}
4.3 效果图
5、额外加一个Hilog的封装扩展（.ts）
import hilog from '@ohos.hilog';
export class Logger {
// 日志对应的领域标识
private domain: number = 0xF811;
// tag日志标识
private prefix: string = '[Logger_Utils]';
// 格式字符串，用于日志的格式化输出
private format: string = '%{public}s, %{public}s';
constructor(prefix: string) {
this.prefix = prefix;
}
debug(...args: string[]): void {
hilog.debug(this.domain, this.prefix, this.format, args);
}
info(...args: string[]): void {
hilog.info(this.domain, this.prefix, this.format, args);
}
warn(...args: string[]): void {
hilog.warn(this.domain, this.prefix, this.format, args);
}
error(...args: string[]): void {
hilog.error(this.domain, this.prefix, this.format, args);
}
}
export default new Logger('[Logger_Utils]');