Quasar 使用以下 CSS 断点：

¥Quasar uses the following CSS breakpoints:

要了解如何使用它们，请访问 可见性 页面。

¥To learn how to use them, please visit the Visibility page.

你可能还需要查看 Flexbox 简介 的 “响应式设计” 部分。

¥You might also want to take a look at the Introduction to Flexbox on the “Responsive Design” section.

Sass(Sass)

你还可以使用 Sass 中的断点：

¥You can also use the breakpoints in Sass:

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

这些变量的语法如下所示，其中 <breakpoint> 应替换为 “xs”、“sm”、“md”、“lg” 或 “xl”：

¥The syntax for these variables is shown below, where <breakpoint> is to be replaced by “xs”, “sm”, “md”, “lg” or “xl”:

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

还有：

¥There’s also:

$sizes.<breakpoint>
// replace <breakpoint> with xs, sm, md, lg or xl

如果启用（仅限），你还可以基于应用于 document.body 的一组特定 CSS 类来设置内容样式：screen--xs, screen--sm, …, screen--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