---
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.md#window-width-related) instead, for performance reasons.

## Screen API

### Props

- `width` (number, optional, reactive)
  Screen width (in pixels)
  Examples: `452`
- `height` (number, optional, reactive)
  Screen height (in pixels)
  Examples: `721`
- `name` (string, optional, reactive)
  Tells current window breakpoint
  Accepts: `'xs'`, `'sm'`, `'md'`, `'lg'`, `'xl'`
- `sizes` (object, optional, reactive)
  Breakpoints (in pixels)
  Examples:
    - `{ sm: 600, md: 1024, lg: 1440, xl: 1920 }`
  Object shape:
    - `sm` (number, optional)
      Breakpoint width size (minimum size)
    - `md` (number, optional)
      Breakpoint width size (minimum size)
    - `lg` (number, optional)
      Breakpoint width size (minimum size)
    - `xl` (number, optional)
      Breakpoint width size (minimum size)
- `lt` (object, optional, reactive)
  Tells if current screen width is lower than breakpoint-name
  Examples:
    - `{ sm: false, md: true, lg: true, xl: true }`
  Object shape:
    - `sm` (boolean, optional)
      Is current screen width lower than this breakpoint's lowest limit?
    - `md` (boolean, optional)
      Is current screen width lower than this breakpoint's lowest limit?
    - `lg` (boolean, optional)
      Is current screen width lower than this breakpoint's lowest limit?
    - `xl` (boolean, optional)
      Is current screen width lower than this breakpoint's lowest limit?
- `gt` (object, optional, reactive)
  Tells if current screen width is greater than breakpoint-name
  Examples:
    - `{ xs: true, sm: true, md: false, lg: false, xl: false }`
  Object shape:
    - `xs` (boolean, optional)
      Is current screen width greater than this breakpoint's max limit?
    - `sm` (boolean, optional)
      Is current screen width greater than this breakpoint's max limit?
    - `md` (boolean, optional)
      Is current screen width greater than this breakpoint's max limit?
    - `lg` (boolean, optional)
      Is current screen width greater than this breakpoint's max limit?
- `xs` (boolean, optional, reactive)
  Current screen width fits exactly 'xs' breakpoint
- `sm` (boolean, optional, reactive)
  Current screen width fits exactly 'sm' breakpoint
- `md` (boolean, optional, reactive)
  Current screen width fits exactly 'md' breakpoint
- `lg` (boolean, optional, reactive)
  Current screen width fits exactly 'lg' breakpoint
- `xl` (boolean, optional, reactive)
  Current screen width fits exactly 'xl' breakpoint

### Methods

- `setSizes(breakpoints: object): void`
  Override default breakpoint sizes
  Params:
    - `breakpoints` (object, required)
      Pick what you want to override
      Object shape:
        - `sm` (number, optional)
          Breakpoint width size (minimum size)
        - `md` (number, optional)
          Breakpoint width size (minimum size)
        - `lg` (number, optional)
          Breakpoint width size (minimum size)
        - `xl` (number, optional)
          Breakpoint width size (minimum size)
- `setDebounce(amount: number): void`
  Debounce update of all props when screen width/height changes
  Params:
    - `amount` (number, required)
      Amount in milliseconds

### Vue Injection

Accessible via `$q.screen` (e.g., `this.$q.screen` in Options API or `useQuasar().screen` in Composition API).

### quasar.config.js Options

Configuration key: `framework.config.screen` (object)

- `bodyClasses` (boolean, optional)
  Whether to apply CSS classes for the current window breakpoint to the body element

## 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>John Doe</q-item-section>
  </q-item>

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

```js
// 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 }
  }
}
```

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

```js
import { Screen } from 'quasar'

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

## Body classes

**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`.

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

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

Or a sexy variant in Sass:

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

### How to enable body classes

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.

Example "/quasar.config file":

```js
framework: {
  config: {
    screen: {
      bodyClasses: true
    }
  }
}
```

## Configuration

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

| Method | Description | Example |
| --- | --- | --- |
| setSizes(Object) | Change window breakpoints; does NOT also changes CSS breakpoints. | setSizes({ lg: 1024, xl: 2000 }) |
| setDebounce(Number) | Change the default 100ms debounce to some other value. | setDebounce(500) // 500ms |

Examples:

Example "Inside a Vue component":

```js
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

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

Example "Outside of a Vue component":

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