Material Design 学习笔记 -- Layout --> Responsive UI

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.

Patterns

As screen space increases, the following responsive patterns may be applied:

• Reveal
• Transform
• Divide
• Reflow
• Expand
• Position

Resizer (可查看Google的Material Design界面示例）

http://material.io/resizer/