Components: Where is the SCSS media query sizes?

Created on 14 Mar 2017 · 11Comments · Source: angular/components

Missing? 320
600
960
Missing! 1280
Missing! 1920

I found only:

// Media queries
// TODO: Find a way to respect media query ranges.
// TODO: For example the xs-breakpoint should not interfere with the sm-breakpoint.
$mat-xsmall: 'max-width: 600px';
$mat-small: 'max-width: 960px';

Source

patrikx3

Most helpful comment

For anyone needing a quick snippet:

$mat-xs: screen and (max-width: 599px);
$mat-sm: screen and (min-width: 600px) and (max-width: 959px);
$mat-md: screen and (min-width: 960px) and (max-width: 1279px);
$mat-lg: screen and (min-width: 1280px) and (max-width: 1919px);
$mat-xl: screen and (min-width: 1920px) and (max-width: 5000px);
$mat-lt-sm: screen and (max-width: 599px);
$mat-lt-md: screen and (max-width: 959px);
$mat-lt-lg: screen and (max-width: 1279px);
$mat-lt-xl: screen and (max-width: 1919px);
$mat-gt-xs: screen and (min-width: 600px); 
$mat-gt-sm: screen and (min-width: 960px);
$mat-gt-md: screen and (min-width: 1280px);
$mat-gt-xl: screen and (min-width: 1920px);

patrickmichalina on 20 Nov 2017

👍20

All 11 comments

See https://github.com/angular/flex-layout

jelbourn on 14 Mar 2017

No, I am not asking about media query. I am asking about SCSS.

patrikx3 on 15 Mar 2017

I am creating a new theme, and I need to know the Material media sizes.

patrikx3 on 15 Mar 2017

We don't have those media breakpoints as part of our API at this time.

jelbourn on 15 Mar 2017

is it going to be in SCSS? for theming i need it. i created my own, but would be good as a material variable.

thanks.

patrikx3 on 17 Mar 2017

For anyone needing a quick snippet:

$mat-xs: screen and (max-width: 599px);
$mat-sm: screen and (min-width: 600px) and (max-width: 959px);
$mat-md: screen and (min-width: 960px) and (max-width: 1279px);
$mat-lg: screen and (min-width: 1280px) and (max-width: 1919px);
$mat-xl: screen and (min-width: 1920px) and (max-width: 5000px);
$mat-lt-sm: screen and (max-width: 599px);
$mat-lt-md: screen and (max-width: 959px);
$mat-lt-lg: screen and (max-width: 1279px);
$mat-lt-xl: screen and (max-width: 1919px);
$mat-gt-xs: screen and (min-width: 600px); 
$mat-gt-sm: screen and (min-width: 960px);
$mat-gt-md: screen and (min-width: 1280px);
$mat-gt-xl: screen and (min-width: 1920px);

patrickmichalina on 20 Nov 2017

👍20

For anyone needing a quick snippet:
(...)
-- @patrickmichalina

Exactly, these match the media queries defined by Angular Flex Layout.

LayZeeDK on 19 Apr 2018

Here's how to make use of @patrickmichalina 's SCSS variables:

@media #{$mat-gt-xs} {
  // insert your styles
}

FirstVertex on 17 Dec 2018

Should anyone have a problem with SCSS not compiling put queries inside string:

$mat-xs: "screen and (max-width: 599px)";
$mat-sm: "screen and (min-width: 600px) and (max-width: 959px)";
$mat-md: "screen and (min-width: 960px) and (max-width: 1279px)";
$mat-lg: "screen and (min-width: 1280px) and (max-width: 1919px)";
$mat-xl: "screen and (min-width: 1920px) and (max-width: 5000px)";
$mat-lt-sm: "screen and (max-width: 599px)";
$mat-lt-md: "screen and (max-width: 959px)";
$mat-lt-lg: "screen and (max-width: 1279px)";
$mat-lt-xl: "screen and (max-width: 1919px)";
$mat-gt-xs: "screen and (min-width: 600px)";
$mat-gt-sm: "screen and (min-width: 960px)";
$mat-gt-md: "screen and (min-width: 1280px)";
$mat-gt-xl: "screen and (min-width: 1920px)";

Bielik20 on 16 Jun 2019

👍1

Late to the party on this, , I would suggest that pointing to an entire repo when someone asks about breakpoints is not very helpful. Besides the fact that I don't use, and don't want to use flex-layout as I am a good enough developer that I can write my own css in flexbox and grid and i don't need someone's idea of "easier" syntax and injected styles to ruin my best practices of separation of concerns.