0
0
So the Angular Material documentation (material.angular.io) do not explain Breakpoints well, pointing to the Material Design documentation, as shown:
The
layoutpackage provides utilities to build responsive UIs that react to screen-size changes.
BreakpointObserverBreakpointObserveris a utility for evaluating media queries and reacting to their changing.
Evaluate against the current viewport
TheisMatchedmethod 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
Theobservemethod 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.
*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)
