Quasar的响应式CSS断点

Quasar 拥有以下 CSS 断点：

这些断点需要搭配其他的 css 工具类来使用，例如响应式 Flexbox， 响应式间距

更多关于如何使用断点的信息请看：Visibility 页面。

Sass

您也可以在 Sass/scss 中使用这些断点

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

语法如下，其中<breakpoint>可替换为"xs", “sm”, “md”, “lg” 或者 “xl”：

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

这样也可以：

$sizes.<breakpoint>
// 替换 <breakpoint> 为 xs, sm, md, lg 或 xl

如果您打开了这个设置,还可以在 document.body.screen 上使用断点：screen--xs, screen--sm, …, screen--xl.

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