Quasar uses the following CSS breakpoints:

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