断点

鸿蒙提供断点以应用窗口宽度为切入点，将应用窗口在宽度维度上分成了几个不同的区间即不同的断点，不同设备会进入到不同的断点区间，在不同的区间下，我们可以可根据需要实现不同的页面布局效果。具体的断点对应的设备尺寸如下所示。

断点名称	取值范围（vp）
xs	[0, 320）
sm	[320, 600)
md	[600, 840)
lg	[840, +∞)

媒体查询

媒体查询支持监听窗口宽度、横竖屏、深浅色、设备类型等多种媒体特征，当媒体特征发生改变时同步调整页面布局。我们可以借助媒体查询能力，监听断点的变化。

栅格布局

栅格组件默认提供xs、sm、md、lg四个断点，除了默认的四个断点，还支持启用 xl 和 xxl 两个额外的断点，我们只需要在 GridRow() 组件的 breakpoints 属性中依次设置对应断点的尺寸，可自行对断点设备的尺寸进行设置从而满足自己尺寸的业务需求，当然还是更推荐使用默认的断点尺，如果使用到媒体查询，和自定义尺寸保持一致即可。

breakpoints 数组中最大可写 5 个尺寸，对应 6 个断点范围，且断点值后面必须加上vp单位。

reference 属性代表 GridRow 宽度变化随屏幕变化，还是随当前局部区域尺寸变化（因为在实际场景中，存在应用窗口尺寸不变但是局部区域尺寸发生了变化的情况，栅格组件支持以自身宽度为参照物响应断点变化具有更大的灵活性。）

栅格布局详细介绍请参考：文档中心

示例代码：

@Entry
@Component
struct GridRowSample1 {
  @State private currentBreakpoint: string = 'unknown'
  build() {
    // 修改断点的取值范围同时启用更多断点，注意，修改的断点值后面必须加上vp单位。
    GridRow({breakpoints: {value: ['600vp', '700vp', '800vp', '900vp', '1000vp'],
      reference: BreakpointsReference.WindowSize}}) {
      GridCol({span:{xs: 12, sm: 12, md: 12, lg:12, xl: 12, xxl:12}}) {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Text(this.currentBreakpoint).fontSize(50).fontWeight(FontWeight.Medium)
        }
      }
    }.onBreakpointChange((currentBreakpoint: string) => {
      this.currentBreakpoint = currentBreakpoint
    })
  }
}