Skip to content

CHill's Ramblings

Thoughts, ideas, and other such things I feel like putting here. About basically any topic.

Angular Material & Breakpoints…. details they didn’t explain in the docs.

Posted on November 30, 2018August 2, 2021 By darkhelm No Comments on Angular Material & Breakpoints…. details they didn’t explain in the docs.
0 0
Read Time:3 Minute, 41 Second

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.
BreakpointObserver
BreakpointObserver is a utility for evaluating media queries and reacting to their changing.
Evaluate against the current viewport
The isMatched 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
The observe 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)
Using a combination of those, along with the specific use cases where I want orientation limits, I was finally able to straighten out my media query resolution weirdness.
I hope this helps others who are trying to make heads or tails of the Breakpoints in Angular Material.

Share

Facebook
Twitter
Pinterest
LinkedIn

About Post Author

darkhelm

chill@darkhelm.org
http://darkhelm.org
Happy
Happy
0 0 %
Sad
Sad
0 0 %
Excited
Excited
0 0 %
Sleepy
Sleepy
0 0 %
Angry
Angry
0 0 %
Surprise
Surprise
0 0 %
Uncategorized

Post navigation

Previous Post: So tired of the political stuff, when’s the election over?
Next Post: The problem with people abusing scripture to attack entertainment

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%
(Add your review)

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Archives

  • October 2021
  • August 2021
  • October 2019
  • November 2018
  • October 2016
  • September 2016
  • November 2015
  • September 2013
  • May 2013
  • October 2012
  • April 2012
  • March 2012
  • December 2010
  • November 2010
  • September 2010
  • August 2010
  • July 2010
  • January 2010

Categories

  • america
  • bitsy
  • blueprints
  • ejb
  • glassfish
  • gwt-syntaxhighlighter
  • jpa
  • jython
  • lies
  • network
  • politics
  • Uncategorized

Recent Posts

  • To Dave Hines, my friend, may you now have the joy you had spread to everyone around you.
  • Router Fun
  • False Peace
  • Moving away from the google universe.
  • The problem with people abusing scripture to attack entertainment

Recent Comments

  1. darkhelm on To Dave Hines, my friend, may you now have the joy you had spread to everyone around you.
  2. Matt Sutton on To Dave Hines, my friend, may you now have the joy you had spread to everyone around you.
  3. Unknown on Jonah, Jonah, did not obey God immediately…
  4. 1seanv on A Christian’s Response To: A Christian’s View of World of Warcraft (published in 2008)
  5. Unknown on Jonah, Jonah, did not obey God immediately…

Copyright © 2023 CHill's Ramblings.

Powered by PressBook WordPress theme