Breakpoints do not match the one in @angular/flex-layout

[probert94]

Bug, feature request, or proposal:

Proposal, probably

What is the expected behavior?

The @angular/material2 README-file contains a link to @angular/flex-layout, so I expect, that the two libraries collaborate somehow and therefore share the same breakpoints.

What is the current behavior?

@angular/flex-layout defines xs as max-width: 599px (see Breakpoints), while @angular/material defines it as max-width: 600px (see Variables).
Same goes for sm (959px vs 960px).

What is the use-case or motivation for changing an existing behavior?

I would like to replace hardcoded max-width-statements in my code with scss-variables, however I am not sure, which breakpoints to use, since they differ (even if it's just 1px).

[josephperrott]

@ThomasBurleson What are your thoughts for this? I interpretted it as the size begins at a breakpoint value, so the previous size would max out at breakpoint value - 1. Thoughts on which way we should go with it?

[ThomasBurleson]

@josephperrott - So I interpreted the breakpoint start as inclusive of the start value:

• xs < 600 px , max-width = 599px
• lt-sm < 600 px, max-width = 599px
• sm >= 600px

If we consider the BreakPoint Diagram on Material Design, it does not clearly indicate which. Yet the authors do talk about amounts “under” a certain breakpoint; which implies the breakpoint includes the value.

[josephperrott]

After speaking with the material design team, the breakpoints are inclusive of the start value as @ThomasBurleson noted.

This however is only an issue in the variables we have defined in scss, but is not an issue within the preferred BreakpointObserver.

[probert94]

@josephperrott thanks for your effort.
For the BreakpointObserver, I am currently using ObservableMedia from @angular/flex-layout, so those breakpoints should be fine too.
The problem is only with some properties in SCSS (like toolbar-height), but it's not a big issue.
Btw.: Is it possible to access the _variables.scss inside my *.scss-files? At the moment I am defining my own variables, but it would be much better to reuse the one in @angular/material2.

Thanks :)

[alsami]

I am having the same problem in an application. The toolbar resizes its height based on the width. When the width is greater than 600px the height equals 64px otherwise 56px. With the breakpoints from angular-flex-layout you cannot make changes to the given layout. Of course you can make your own media-queries to make this work but it'd be really awesome if the breakpoints were aligned according to the specs. Anyway thanks for the great work!