断点(Breakpoints)

Quasar使用以下CSS断点:

窗口大小名称宽度阈值(以像素为单位)
Extra Smallxs高达599px
Smallsm高达1023px
Mediummd高达1439px
Largelg高达1919px
Extra Largexl大于1920像素

若要了解如何使用它们,请访问可见性页面.

您可能还想看看Flexbox简介的“响应式设计”部分

Sass和Stylus

您还可以在Stylus中使用断点:

@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”

从**Quasar v1.5.3 +**开始,如果启用(仅),您还可以根据应用于document.body的一组特定的CSS类集设置内容的样式:screen--xs, screen--sm, …, screen-xl

// v1.5.3+

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