Layout / The visual dictionary

Breakpoint.

A width or condition at which a layout switches its arrangement.

Also calledmedia query thresholdlayout breakpoint

See it in context

UI illustration

Compact

→

Expanded

What it is

A width or condition at which a layout switches its arrangement. Choose breakpoints when the current composition no longer fits comfortably, then adjust columns or navigation.

When to use it

Use it to adapt content density and layout rather than target a specific phone model.

Know the difference

A breakpoint triggers a layout change; a fluid value continuously scales between changes.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinux

Web · iOS · iPadOS · Android · macOS · Windows · Linux

Web uses media or container queries; native apps use available size and platform layout classes.

Go to the source

Primary documentation for the pattern and its platform conventions.

Apple Human Interface Guidelines — Layout

FROM NAME TO NEXT BUILD

Put it into words.

Choose a device and an effect, then copy the whole description.

Building forPhone modelAnimation effectBrowse the effect library

Create a breakpoint. Choose breakpoints when the current composition no longer fits comfortably, then adjust columns or navigation. Use it to adapt content density and layout rather than target a specific phone model. Make it responsive and accessible, and follow the selected platform's interaction conventions.

Your copied description includes the component, device context, and selected animation timing.

See it in context

What it is

When to use it

Know the difference

Across platforms

Web · iOS · iPadOS · Android · macOS · Windows · Linux

Go to the source

You might also mean…

Responsive layout

Adaptive layout

Multi-column layout