Breakpoints

Quasar uses the following CSS breakpoints:

Window SizeNameMin-width threshold in pixelsMax-width threshold in pixels
Extra Smallxs0px599.99px
Smallsm600px1023.99px
Mediummd1024px1439.99px
Largelg1440px1919.99px
Extra Largexl1920pxInfinity

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