---
title: Breakpoints
related:
  - title: CSS Spacing Classes
    path: spacing.md
---
Quasar uses the following CSS breakpoints:

| Window Size | Name | Min-width threshold in pixels | Max-width threshold in pixels |
| --- | --- | --- | --- |
| Extra Small | `xs` | 0px | 599.98px |
| Small | `sm` | 600px | 1023.98px |
| Medium | `md` | 1024px | 1439.98px |
| Large | `lg` | 1440px | 1919.98px |
| Extra Large | `xl` | 1920px | Infinity |

To learn how to use them, please visit the [Visibility](visibility.md) page.

You might also want to take a look at the [Introduction to Flexbox](../layout/grid/introduction-to-flexbox.md#responsive-design) on the "Responsive Design" section.

### Sass

You can also use the breakpoints in Sass:

```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)](../options/screen-plugin.md#how-to-enable-body-classes), you can also style your content based on a particular set of CSS classes applied to document.body: `screen--xs`, `screen--sm`, ..., `screen--xl`.

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