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: 10px
content_paste
以下显示了这些变量的语法,其中 <breakpoint>
将被替换为“xs”,“sm”,“md”,“lg” 或“xl”
$breakpoint-<breakpoint>-min
$breakpoint-<breakpoint>-max
content_paste
还有
$sizes.<breakpoint>
// replace <breakpoint> with xs, sm, md, lg or xl
content_paste
如果启用(仅),您还可以根据应用于 document.body 的特定 CSS 类集来设置内容样式:screen--xs
,screen--sm
,…,screen--xl
。
.my-div
body.screen--xs &
color: #000
body.screen--sm &
color: #fff
content_paste