!21067 register方案补充初始化操作以及代码模块分割优化

Merge pull request !21067 from songqq0825/master

zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md

@@ -151,10 +151,9 @@ OpenHarmony提供了多种方法，判断应用当前处于何种断点，进而
 | ![zh-cn_image_0000001336165712](figures/zh-cn_image_0000001336165712.jpg) | ![zh-cn_image_0000001386485617](figures/zh-cn_image_0000001386485617.jpg) | ![zh-cn_image_0000001386805569](figures/zh-cn_image_0000001386805569.jpg) | 
 
 
-
+1.对通过媒体查询监听断点的功能做简单的封装，方便后续使用
 ```ts
 // common/breakpointsystem.ets
-// 对通过媒体查询监听断点的功能做简单的封装，方便后续使用
 import mediaquery from '@ohos.mediaquery';
 
 export class BreakpointType<T> {
@@ -210,10 +209,22 @@ export class BreakpointSystem {
 
   public register() {
     this.smListener = mediaquery.matchMediaSync("(320vp<width<600vp)")
+    //初始化
+    if (this.smListener.matches){
+      this.updateCurrentBreakpoint('sm')
+    }
     this.smListener.on("change", this.isBreakpointSM)
     this.mdListener = mediaquery.matchMediaSync("(600vp<width<840vp)")
+   //初始化
+    if (this.mdListener.matches){
+      this.updateCurrentBreakpoint('md')
+    }
     this.mdListener.on("change", this.isBreakpointMD)
     this.lgListener = mediaquery.matchMediaSync("(840vp<width)")
+   //初始化
+    if (this.lgListener.matches){
+      this.updateCurrentBreakpoint('lg')
+    }
     this.lgListener.on("change", this.isBreakpointLG)
   }
 
@@ -224,6 +235,9 @@ export class BreakpointSystem {
   }
 }
 
+```
+2.在页面中，通过媒体查询，监听应用窗口宽度变化，获取当前应用所处的断点值
+```
 // MediaQuerySample.ets
 import { BreakpointSystem, BreakpointType } from '../common/breakpointsystem'
 
@@ -259,6 +273,7 @@ struct MediaQuerySample {
 ```
 
 
+
 ## 栅格布局
 
 ### 简介