【鸿蒙开发】响应式布局兼容pc和手机

前言

响应式设计（Responsive Web Design，简称RWD）在Web网站设计领域是一种网页设计方法论，旨在让网站在不同设备和屏幕尺寸上都能提供良好的阅读和交互体验，而无需为每一个新设备或屏幕尺寸创建单独的版本。这种设计方法的核心在于页面布局和内容可以根据用户所使用的设备特性（如屏幕尺寸、分辨率、方向等）进行灵活调整。

实现

断点

响应式布局中最常使用的特征是窗口宽度及窗口高宽比，可以将窗口宽度及窗口高宽比划分为不同的范围，称之为“断点”

断点的定义

横向断点以应用窗口宽度为判断条件，建议划分为如下几个区间：

断点名称	窗口宽度（vp）
xs	(0, 320）
sm	[320, 600)
md	[600, 840)
lg	[840, 1440)
xl	[1440, +∞)

纵向断点根据应用窗口的高宽比进行判断，建议划分为如下几个区间：

断点名称	高宽比
sm	(0, 0.8)
md	[0.8, 1.2)
lg	[1.2, +∞)

这里只使用横向断点，做响应式的判断

在onWindowStageCreate事件中获取，注意获取是要保证content已经完成加载

windowSizeChange(winClass: window.Window) {
  const widthBp = winClass.getUIContext()
    .getWindowWidthBreakpoint();
  AppStorage.setOrCreate('widthBp', widthBp);
}

onWindowStageCreate(windowStage: window.WindowStage): void {
  const winClass = windowStage.getMainWindowSync();

  windowStage.loadContent('pages/Index')
    .then(() => {
      this.windowSizeChange(winClass);
      winClass.on('windowSizeChange', () => {
        this.windowSizeChange(winClass);
      });
    });
}

在页面中获取

@StorageProp('widthBp') widthBp: WidthBreakpoint = WidthBreakpoint.WIDTH_XS;

以下是获取的枚举值，可以看到获取的值是number类型的。

enum WidthBreakpoint {
    /**
     * Window width < 320vp type.
     *
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @atomicservice
     * @since 13
     */
    WIDTH_XS = 0,
    /**
     * Window width >= 320vp and < 600vp type.
     *
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @atomicservice
     * @since 13
     */
    WIDTH_SM = 1,
    /**
     * Window width >= 600vp and < 840vp type.
     *
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @atomicservice
     * @since 13
     */
    WIDTH_MD = 2,
    /**
     * Window width >= 840vp and < 1440vp type.
     *
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @atomicservice
     * @since 13
     */
    WIDTH_LG = 3,
    /**
     * Window width >= 1440vp type.
     *
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @atomicservice
     * @since 13
     */
    WIDTH_XL = 4
}

可以根据获取的值来判断ui的变化。

以上就是实现的大致思路