Quasar uses the following CSS breakpoints:
|Window Size||Name||Width threshold in pixels|
|Extra Small||Up to 599px|
|Small||Up to 1023px|
|Medium||Up to 1439px|
|Large||Up to 1919px|
|Extra Large||Bigger than 1920px|
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 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