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.

Stylus

You can also use the breakpoints in Stylus:

@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