Quasar 使用以下 CSS 斷點

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

您也可以在 Sass 中使用斷點

@media (max-width: $breakpoint-xs-max)
  font-size: 10px

這些變數的語法如下所示，其中 <breakpoint> 會被替換為 “xs”、“sm”、“md”、“lg” 或 “xl”

$breakpoint-<breakpoint>-min
$breakpoint-<breakpoint>-max

There’s also

$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: screen--xs, screen--sm, …, screen--xl.

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