Why donate
API Explorer

Quasar uses the following CSS breakpoints:

Window SizeNameMin-width threshold in pixelsMax-width threshold in pixels
Extra Smallxs0px599.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.


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”:


There’s also:

// 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.

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