Quasar Screen 插件允许你在处理 JavaScript 代码时拥有动态且响应迅速的 UI。出于性能方面的考虑，建议尽可能使用 响应式 CSS 类。

¥The Quasar Screen plugin allows you to have a dynamic and responsive UI when dealing with your Javascript code. When possible, it is recommended to use the responsive CSS classes instead, for performance reasons.

用法(Usage)

¥Usage

注意下面的 $q.screen。这只是一个简单的使用示例。

¥Notice $q.screen below. This is just a simple usage example.

<q-list :dense="$q.screen.lt.md">
  <q-item>
    <q-item-section>John Doe</q-item-section>
  </q-item>

  <q-item>
    <q-item-section>Jane Doe</q-item-section>
  </q-item>
</q-list>

// script part of a Vue component
import { useQuasar } from 'quasar'
import { computed } from 'vue'

export default {
  setup () {
    const $q = useQuasar()
    const buttonColor = computed(() => {
      return $q.screen.lt.md
        ? 'primary'
        : 'secondary'
    })

    return { buttonColor }
  }
}

我们也可以在 Vue 组件之外使用 Screen 插件：

¥We can also use the Screen plugin outside of a Vue component:

import { Screen } from 'quasar'

// Screen.gt.md
// Screen.md
// Screen.name ('xs', 'sm', ...)

Body 类(Body classes)

¥Body classes

如果你启用它（请参阅以下示例后的操作），你还可以基于应用于 document.body 的一组特定 CSS 类来设置内容样式：screen--xs, screen--sm, …, screen-xl.

¥If you enable it (see how to do it after the examples below), you can also style your content based on a particular set of CSS classes applied to document.body: screen--xs, screen--sm, …, screen-xl.

body.screen--xs {
  .my-div {
    color: #000;
  }
}

body.screen--sm {
  .my-div {
    color: #fff;
  }
}

或者一个性感的变体 Sass：

¥Or a sexy variant in Sass:

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

如何启用 body 类(How to enable body classes)

¥How to enable body classes

为了启用上述行为，请按如下所示编辑 /quasar.config 文件。请注意，这会稍微增加首次有效绘制的时间。

¥In order to enable the behavior above, edit your /quasar.config file like below. Please note that this will increase a bit the time for First Meaningful Paint.

framework: {
  config: {
    screen: {
      bodyClasses: true // <<< add this
    }
  }
}

配置(Configuration)

¥Configuration

有一些方法可用于调整 Screen 插件的工作方式：

¥There are a few methods that can be used to tweak how Screen plugin works:

示例：

¥Examples:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })
}

import { Screen } from 'quasar'
Screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })