Shift media query breakpoints 1px

Bug, feature request, or proposal:

Proposing the following:

$mat-xsmall: 'max-width: 600px'; // -> 599px
$mat-small: 'max-width: 960px'; // -> 959px

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

The flex-layout library uses max-width: 599px and max-width: 959px for their xsmall and small breakpoints, respectively. However, material2 uses 600px and 960px, respectively.

This causes a 1px gap between media-query changes.

[grizzm0]

The spec states the following:

• Layouts under 600dp wide may fill the screen with a single level of content hierarchy (either summary or detail content, but not both).
• Layouts over 600dp wide may place two levels of content hierarchy on the screen (both summary and detail content).

Which doesn’t give a clear answer to if the breakpoint should be at 599 or 600 for max-width.

A bit further down however it states “* 16dp when the smallest width of the device is <600” which indicates that the breakpoint for max-width should be 599.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}