mirror of
https://github.com/langgenius/dify.git
synced 2026-11-11 13:51:25 +08:00
18 lines
1.3 KiB
Markdown
18 lines
1.3 KiB
Markdown
# Responsive Layout
|
|
|
|
Viewport width tells how much space there is, not which device the user has. A desktop browser zoomed in is as narrow as a phone.
|
|
|
|
A responsive surface is one component tree at every width. CSS decides how it looks at each breakpoint. JavaScript reads width only for behaviour CSS cannot express, through `@langgenius/dify-ui/use-media-query`, at the same breakpoints as Tailwind.
|
|
|
|
## What Goes Wrong
|
|
|
|
- **A component tree per breakpoint.** Crossing the breakpoint, including by zooming, remounts the subtree and drops focus and local state.
|
|
- **The query copied into state**, by an Effect or as a `useState` initial value. State and screen disagree after the width changes, and a first mount during hydration only sees the wide default. See [component state] and [Effects].
|
|
- **JavaScript and CSS switching at different widths.** The surface passes through a state neither side designed.
|
|
- **Width used as a device check.** Flags named like `isMobile` invite assumptions about touch or hover that width cannot support; input differences follow the `hover` and `pointer` media features.
|
|
|
|
Some existing surfaces still switch component trees by width. They are not examples to follow.
|
|
|
|
[Effects]: ../../.agents/skills/how-to-write-component/references/runtime.md
|
|
[component state]: ../../.agents/skills/how-to-write-component/references/state.md
|