为什么捐赠
API 资源管理器
断点

Quasar 使用以下 CSS 断点

窗口大小名称最小宽度阈值(像素)最大宽度阈值(像素)
超小xs0px599.99px
sm600px1023.99px
md1024px1439.99px
lg1440px1919.99px
超大xl1920pxInfinity

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

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

Sass

您也可以在 Sass 中使用断点

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

以下显示了这些变量的语法,其中 <breakpoint> 将被替换为“xs”,“sm”,“md”,“lg” 或“xl”

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

还有

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

如果启用(仅),您还可以根据应用于 document.body 的特定 CSS 类集来设置内容样式:screen--xsscreen--sm,…,screen--xl

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