Quasar Breakpoints Visualizer

Resize the window and watch $q.screen and the visibility classes change live. Then set your own breakpoints and copy the code.

Live $q.screen
The live readout starts once the page has loaded in your browser.
Default Quasar breakpoints
Name From To
xs0px 599.98px
sm600px 1023.98px
md1024px 1439.98px
lg1440px 1919.98px
xl1920px no limit
Each breakpoint starts at its own width, so 1024px is md. The same numbers drive the grid classes, the visibility classes and $q.screen.
Visibility classes right now
Loads in your browser.
Custom breakpoints
Each size is the width where that breakpoint starts. xs always starts at 0.
Sass variables 
$breakpoint-xs: 599px;
$breakpoint-sm: 1023px;
$breakpoint-md: 1439px;
$breakpoint-lg: 1919px;
Add to src/css/quasar.variables.scss (Quasar CLI) or the file the Nuxt module's sassVariables option points to. This moves the grid and visibility classes, and $q.screen follows, because it reads the --q-size-* properties of Quasar's CSS when it starts.
$q.screen.setSizes 
import { Screen } from 'quasar'

export default () => {
  Screen.setSizes({ sm: 600, md: 1024, lg: 1440, xl: 1920 })
}
Save as src/boot/screen.js and add 'screen' to boot in quasar.config. setSizes changes $q.screen only, not the CSS classes, so use it on its own only when you can't change the Sass variables.
Show an element only on
Pick the sizes where it should appear and get the matching class and $q.screen condition. 
<div class="gt-sm">...</div>

<div v-if="$q.screen.gt.sm">...</div>
The class keeps the element in the page and lets CSS hide it, so it is right on the first paint, even with SSR. v-if leaves it out of the page entirely, but on the server $q.screen reports xs until hydration.

How to use the Quasar Breakpoints Visualizer

  1. Drag the edge of your browser window, or rotate your phone. The live panel shows $q.screen.name, the width and height, and every xs-xl, lt and gt flag as Quasar updates them.
  2. Read the visibility classes panel to see which of xs, lt-md, gt-sm and the rest would show an element at the current width.
  3. To change the breakpoints, pick a preset or type the width where sm, md, lg and xl start. Copy the Sass variables to move the CSS classes and $q.screen together, or the setSizes call for $q.screen alone.
  4. Under Show an element only on, pick the sizes where an element should appear, then copy the class or the v-if condition into your template.

Need responsive sections that already handle every breakpoint? Browse the QuasarUI components.

Frequently asked questions