Shift media query breakpoints 1px

[Pikachews]

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.

[donroyco]

According to the Google Material guidelines, a responsive UI consists of:

For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.

So, it's actually a debate to break on 599pxor on 600px. Flex-layout and Material2 should be aligned, but I don't know what the pros and cons are for making the current decision.

[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.

[mackelito]

Looking at this image https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B8olV15J7abPSGFxemFiQVRtb1k/layout_adaptive_breakpoints_01.png

It does look like the start of a breakpoint is what is displayed in the red boxes. So then end of previous breakpoint should be 1px before right?

[andrewseguin]

@jelbourn Looks like an issue of consistency with flex-layout. I think one of us will need to change to make sure we're compatible

[jelbourn]

The media-query / breakpoint stuff is going to be refactored into the cdk before too long, so it will probably be resolved then.

[josephperrott]

Fixed by #6772

[angular-automatic-lock-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.}