<commit_before>---
title: Screen Plugin
---
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.

## Installation
You don't need to do anything. The Screen plugin gets installed automatically.

## Usage
Notice `$q.screen` below. This is just a simple usage example.

```html
<q-list :dense="$q.screen.lt.md">
  <q-item>
    <q-item-section><NAME></q-item-section>
  </q-item>

  <q-item>
    <q-item-section><NAME></q-item-section>
  </q-item>
</q-list>
```

```js
// script part of a Vue component
export default {
  computed: {
    buttonColor () {
      return this.$q.screen.lt.md
        ? 'primary'
        : 'secondary'
    }
  }
}<commit_msg>Add link to CSS classes 🔗 (#4333)<commit_after>---
title: Screen Plugin
---
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](/style/visibility#Window-Width-Related) instead, for performance reasons.

## Installation
You don't need to do anything. The Screen plugin gets installed automatically.

## Usage
Notice `$q.screen` below. This is just a simple usage example.

```html
<q-list :dense="$q.screen.lt.md">
  <q-item>
    <q-item-section><NAME></q-item-section>
  </q-item>

  <q-item>
    <q-item-section><NAME></q-item-section>
  </q-item>
</q-list>
```

```js
// script part of a Vue component
export default {
  computed: {
    buttonColor () {
      return this.$q.screen.lt.md
        ? 'primary'
        : 'secondary'
    }
  }
}
{'fraction_non_alphanumeric': 0.13733650416171225, 'fraction_numerical': 0.0023781212841854932, 'mean_word_length': 3.176178660049628, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3733443', 'n_tokens_mistral': 558, 'n_tokens_neox': 524, 'n_words': 180}