Responsive layout
An important part of Material Designs are responsive layouts that adapt to any possible screen size. To achieve this, we use breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600 dp as defined by the following table from https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints:
Breakpoint (dp) | Handset/ Tablet Portrait | Handset/ Tablet Landscape | Window | Columns | Gutter |
0 | Small handset | xsmall | 4 | 16 | |
360 | Medium handset | xsmall | 4 | 16 | |
400 | Large handset | xsmall | 4 | 16 | |
480 | Large handset | Small handset | xsmall | 4 | 16 |
600 | Small tablet | Medium handset | small | 8 | 16/24 |
720 | Large tablet | Large handset | small | 8 | 16/24 |
840 | Large tablet | Large handset | small | 12 | 16/24 |
960 | Small tablet | small | 12 | 24 | |
1024 | Large tablet | medium | 12 | 24 | |
1280 | Large tablet | medium | 12 | 24 | |
1440 | large | 12 | 24 | ||
1600 | large | 12 | 24 | ||
1920 | xlarge | 12 | 24 |
Note that all the Material Design directive we will use in this chapter already implement these breakpoints. However, you have to keep them in mind if you start theming (see the last section of the chapter) or implementing custom directives. CSS...
