---
title: 添加响应式行为
description: 当 CSS 无法表达行为变化时，使用共享的断点和交互 Hooks。
order: 20
toc:
  - id: breakpoints
    title: 断点
  - id: server-rendering
    title: 服务端渲染
  - id: ripple
    title: 波纹交互
---

## 断点 {#breakpoints}

```tsx
import { useBreakpoint, useIsMobile } from "@workspace/ui/hooks/use-breakpoint"

const breakpoint = useBreakpoint()
const isMobile = useIsMobile()
```

视觉变化优先使用 CSS 响应式变体。只有组件行为或挂载内容必须变化时才使用这些 Hooks。

## 服务端渲染 {#server-rendering}

断点 Store 使用确定的桌面端服务端快照。当应用需要 CSS 与行为断点在水合前保持一致时，可用 `getBreakpointInitializationScript` 提前设置匹配的根节点类名。

## 波纹交互 {#ripple}

`useRipple` 返回一个 ref 回调，为交互元素加入指针反馈。元素应创建定位上下文，使生成的覆盖层使用正确边界。