Quasar uses the following CSS breakpoints:
|Window Size||Name||Min-width threshold in pixels||Max-width threshold in pixels|
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 and Stylus
You can also use the breakpoints in Stylus:
@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”:
$sizes.<breakpoint> // replace <breakpoint> with xs, sm, md, lg or xl
Starting with Quasar v1.5.3+, if enabled (only), you can also style your content based on a particular set of CSS classes applied to document.body:
// v1.5.3+ .my-div body.screen--xs & color: #000 body.screen--sm & color: #fff