Breakpoints

Quasar uses the following CSS breakpoints:

Window SizeNameWidth threshold in pixels
Extra SmallxsUp to 599px
SmallsmUp to 1023px
MediummdUp to 1439px
LargelgUp to 1919px
Extra LargexlBigger than 1920px

To learn how to use them, please visit the Visibility page.

You might also want to take a look at the Introduction to Flexbox on the “Responsive Design” section.

Sass

You can also use the breakpoints in Sass:

@media (max-width: $breakpoint-xs-max)
  font-size: 10px

The syntax for these variables is shown below, where <breakpoint> is to be replaced by “xs”, “sm”, “md”, “lg” or “xl”:

$breakpoint-<breakpoint>-min
$breakpoint-<breakpoint>-max

There’s also:

$sizes.<breakpoint>
// replace <breakpoint> with xs, sm, md, lg or xl

If enabled (only), you can also style your content based on a particular set of CSS classes applied to document.body: screen--xs, screen--sm, …, screen--xl.

.my-div
  body.screen--xs &
    color: #000
  body.screen--sm &
    color: #fff