So the Angular Material documentation (material.angular.io) do not explain Breakpoints well, pointing to the Material Design documentation, as shown:
The
layout
package provides utilities to build responsive UIs that react to screen-size changes.
BreakpointObserverBreakpointObserver
is a utility for evaluating media queries and reacting to their changing.
Evaluate against the current viewport
TheisMatched
method is used to evaluate one or more media queries against the current viewport size.
const isSmallScreen = breakpointObserver.isMatched(‘(max-width: 599px)‘);
React to changes to the viewport
Theobserve
method is used to get an observable stream that will emit whenever one of the given media queries would have a different result.
const layoutChanges = breakpointObserver.observe([
‘(orientation: portrait)‘,
‘(orientation: landscape)‘,
]);
layoutChanges.subscribe(result => {
updateMyLayoutForOrientationChange();
});
Default breakpoints
A set of default media queries are available corresponding to breakpoints for different device types.
import {BreakpointObserver, Breakpoints} from ‘@angular/cdk/layout‘;
@Component({…})
class MyComponent {
constructor(breakpointObserver: BreakpointObserver) {
breakpointObserver.observe([
Breakpoints.HandsetLandscape,
Breakpoints.HandsetPortrait ]).subscribe(result => {
if (result.matches) {
this.activateHandsetLayout();
}
});
}
}
The built-in breakpoints based on Google’s Material Design specification. The available values are:
- Handset
- Tablet
- Web
- HandsetPortrait
- TabletPortrait
- WebPortrait
- HandsetLandscape
- TabletLandscape
- WebLandscape
With Google’s Material Design specification not extremely helpful, especially with the breakpoints:
Breakpoint system
Material Design provides responsive layouts based on the following column structures. Layouts using 4-column, 8-column, and 12-column grids are available for use across different screens,…
READ MOREMaterial Design provides responsive layouts based on the following column structures. Layouts using 4-column, 8-column, and 12-column grids are available for use across different screens, devices, and orientations.
Each breakpoint range determines the number of columns, and recommended margins and gutters, for each display size.
Breakpoint Range (dp) Portrait Landscape Window Columns Margins / Gutters* 0 – 359 small handset xsmall 4 16 360 – 399 medium handset xsmall 4 16 400 – 479 large handset xsmall 4 16 480 – 599 large handset small handset xsmall 4 16 600 – 719 small tablet medium handset small 8 16 720 – 839 large tablet large handset small 8 24 840 – 959 large tablet large handset small 12 24 960 – 1023 small tablet small 12 24 1024 – 1279 large tablet medium 12 24 1280 – 1439 large tablet medium 12 24 1440 – 1599 large 12 24 1600 – 1919 large 12 24 1920 + xlarge 12 24*Margins and gutters are flexible and don’t need to be of equal size.
My problem was that I had built a system using only the builtin breakpoints as defined in the documentation. And I had a UI that at first seemed fine, but I found out some resolutions “slipped through the cracks” and resulted in unexpected display rendering.
This is because the actual code in the angular/material2 github repository, there is some specifics not explained:
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
// PascalCase is being used as Breakpoints is used like an enum.
// tslint:disable-next-line:variable-name
export const Breakpoints = {
XSmall: '(max-width: 599.99px)',
Small: '(min-width: 600px) and (max-width: 959.99px)',
Medium: '(min-width: 960px) and (max-width: 1279.99px)',
Large: '(min-width: 1280px) and (max-width: 1919.99px)',
XLarge: '(min-width: 1920px)',
Handset: '(max-width: 599.99px) and (orientation: portrait), ' +
'(max-width: 959.99px) and (orientation: landscape)',
Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' +
'(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
Web: '(min-width: 840px) and (orientation: portrait), ' +
'(min-width: 1280px) and (orientation: landscape)',
HandsetPortrait: '(max-width: 599.99px) and (orientation: portrait)',
TabletPortrait: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait)',
WebPortrait: '(min-width: 840px) and (orientation: portrait)',
HandsetLandscape: '(max-width: 959.99px) and (orientation: landscape)',
TabletLandscape: '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
};
The breakpoints the documentation says exist and are allowed have orientation limits — not only width is used, but also it restricts based on if the screen is landscape or portrait modes.
Even more important is that there are a set of breakpoints, undocumented, that do not make such a restriction:
- XSmall (599.99px or less)
- Small (600 – 959.99px)
- Medium (960 – 1279.99px)
- Large (1280 – 1919.99px)
- XLarge (1920px or greater)