Breakpoints

Quasar uses the following CSS breakpoints:

Window SizeNameBreakpoint space in pixels
Extra SmallxsUp to 599px
Smallsm600px to 1023px
Mediummd1024px to 1439px
Largelg1440px to 1919px
Extra Largexl1920px and up

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