Material Design 学习笔记 -- Layout --> Responsive UI_2025元旦假期放哪三天material design中layout章节里的responsive l-CSDN博客

Responsive UI

Breakpoints

For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.

Grid

Material design’s responsive UI is based on a 12-column grid layout. This grid creates visual consistency between layouts, while allowing flexibility across a wide variety of designs. The number of grid columns varies based on the breakpoint system.

Margins and Gutters

The responsive grid focuses on consistent margin and gutter widths, rather than column width. Material design margins and columns follow an 8dp square baseline grid. Margins and gutters can be 8, 16, 24, or 40dp wide.

Surface behaviors

When a screen size changes, the UI adapts using the following surface-specific behaviors.

Visibility

Behavior	Definition
Permanent	When screen space is available, a surface is always visible.
Persistent	Surface visibility can be toggled between visible and hidden. When visible, interacting with other elements on the screen does not change visibility.
Temporary	Surface visibility can be toggled between visible and hidden. When visible, interacting with other elements on the screen toggles the surface to become hidden or minimized.