CSS 断点 | Quasar Framework

如何贡献

选项与辅助工具

样式与标识

布局与栅格

Vue 组件

Vue 指令

Quasar 插件

Vue 组合式函数

安全

Quasar CLI（Vite 版）

Quasar CLI（Webpack 版）

Icon Genie CLI

应用扩展

Quasar 工具函数

CSS 断点

Quasar 使用以下 CSS 断点：

窗口大小	名称	最小宽度阈值（像素）	最大宽度阈值（像素）
超小	`xs`	0px	599.99px
小	`sm`	600px	1023.99px
中	`md`	1024px	1439.99px
大	`lg`	1440px	1919.99px
超大	`xl`	1920px	无限

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

您可能还想看看 Flexbox 布局介绍中的"响应式设计"部分。

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

@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 上的一组 CSS 类来设置样式：screen--xs、screen--sm、…、screen--xl。

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

1. Introduction

1.1. Sass