Quasar uses the following CSS breakpoints:
|Window Size||Name||Breakpoint space in pixels|
|Extra Small||Up to 599px|
|Small||600px to 1023px|
|Medium||1024px to 1439px|
|Large||1440px to 1919px|
|Extra Large||1920px and up|
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”:
$sizes.<breakpoint> // 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:
.my-div body.screen--xs & color: #000 body.screen--sm & color: #fff