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 and 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

Starting with Quasar v1.5.3+, 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.

// v1.5.3+

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