Breakpoints
响应式断点
Aliases:响应式断点媒体查询断点断点手机和电脑的分界什么时候换布局大屏小屏切换点breakpointmedia query breakpoint
What is it
Breakpoints are viewport widths where a layout changes. Pick them where content crowds, not device names, then stack mobile-first min-width rules.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- One page needs different column counts or navigation on phone and desktop
- A width threshold should switch the sidebar, type scale or density
- Building mobile-first and enhancing upward step by step
✕ When not to use
- A fixed-width embedded widget that never adapts
- Naming breakpoints after device models such as iPhone 15 or iPad Pro
- A dozen breakpoints fighting each other and hard to maintain
Variants
Mobile-first
移动优先
Write the narrow baseline first, then stack min-width rules
Content-driven
内容驱动
Widen the window; wherever it crowds is the breakpoint
Breakpoint tokens
断点令牌
Centralise breakpoint values as tokens, not scattered magic numbers
Implementation
@media (min-width: 48rem)min-width: 0grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))container-type: inline-sizepadding-inline: clamp(1rem, 4vw, 2.5rem)Write narrow styles as the base, then override upward with @media (min-width: ...) instead of desktop-first max-width. Express breakpoints in em/rem (48rem = 768px) so they follow zoom; define them once as CSS variables or Tailwind screens and never scatter magic numbers inside components. Where flex-wrap, grid auto-fit or clamp() can adapt, skip the breakpoint entirely.
Platform API
@mediamin-widthcontainer-typeclamp()In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | @media (min-width: 48rem) Mobile-first minimum-width media query |
| Tailwind CSS | sm: / md: / lg: Prefixes are min-width breakpoints |
| CSS Container Queries | @container (min-width: 30rem) Switch on component width, not the viewport |
Related concepts
A ratio-based set of font sizes that assigns heading and body levels a stable rhythm. Multiply a base body size by a fixed ratio (1.25 major third, 1.333 perfect fourth) to step upward, producing predictable contrast between headings instead of hand-picked pixels. Ship it as sm/md/lg tokens or fluid clamp() steps.
FoundationSimilarA touch target is the tappable area a finger must hit, not the icon size. Aim for 44×44 CSS px (48dp), about 8px between targets, and pad small icons to size.
FoundationSimilarA horizontal navigation bar pinned to the top of the page: brand on the left, primary links in the middle, search, actions and avatar on the right. It is the front door of a site — the 3–7 most important destinations compressed into one strip, folding into a hamburger menu on mobile. Usually kept visible with position: sticky.
ComponentsUsed withA vertical navigation area pinned to one side of the page (usually the left), carrying the primary hierarchy of a product. The de facto standard of admin systems: brand and global search on top, module tree in the sidebar, content focused on the task.
ComponentsUsed with