Quasar 使用以下 CSS 断点
| 窗口大小 | 名称 | 最小宽度阈值(像素) | 最大宽度阈值(像素) |
|---|---|---|---|
| 超小 | xs | 0px | 599.99px |
| 小 | sm | 600px | 1023.99px |
| 中 | md | 1024px | 1439.99px |
| 大 | lg | 1440px | 1919.99px |
| 超大 | xl | 1920px | Infinity |
要了解如何使用它们,请访问 可见性 页面。
您可能还想查看 “响应式设计” 部分中的 Flexbox 简介。
Sass
您也可以在 Sass 中使用断点
@media (max-width: $breakpoint-xs-max)
font-size: 10pxcontent_paste
以下显示了这些变量的语法,其中 <breakpoint> 将被替换为“xs”,“sm”,“md”,“lg” 或“xl”
$breakpoint-<breakpoint>-min
$breakpoint-<breakpoint>-maxcontent_paste
还有
$sizes.<breakpoint>
// replace <breakpoint> with xs, sm, md, lg or xlcontent_paste
如果启用(仅),您还可以根据应用于 document.body 的特定 CSS 类集来设置内容样式:screen--xs,screen--sm,…,screen--xl。
.my-div
body.screen--xs &
color: #000
body.screen--sm &
color: #fffcontent_paste