Quasar屏幕插件允许您在处理Javascript代码时拥有动态且响应迅速的UI。 如果可能，出于性能原因，建议使用响应式CSS类 。

安装

你不需要做任何事情。屏幕插件会自动安装。

用法

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

<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>

// Vue组件的脚本部分
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组件之外使用屏幕插件：

import { Screen } from 'quasar'

// Screen.gt.md
// Screen.md
// Screen.name ('xs', 'sm', ...; Quasar v1.5.2+)

Body类

如果启用它（请参见下面的示例），您还可以根据应用于document.body的一组特定的CSS类来设置内容的样式： screen--xs、screen--sm、…、screen-xl.

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

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

或Sass中的一个性感变体：

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

如何启用body类

为了启用上述行为，请按如下所示编辑/quasar.config.js文件。 请注意，这将增加First Meaningful Paint的时间。

// 文件: /quasar.config.js

framework: {
  config: {
    screen: {
      bodyClasses: true // <<< 添加这个
    }
  }
}

配置

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

例子:

// 在Vue组件内:
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

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

// 在Vue组件外:
import { Screen } from 'quasar'
Screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })

API