---
title: Media Query
description: Support for adjusting visual design on a variety of screen sizes.
sass: ./scss/_mediaquery.scss
js: ./js/bonsai.mediaquery.js
foundation: http://foundation.zurb.com/sites/docs/media-queries.html
---

## How to use

### Defining breakpoints

Bonsai comes with many breakpoints built-in. Classes and breakpoint values are defined in separate variables.

```
$bonsai-breakpoint-classes: (small, medium, large, xlarge, xxlarge) !default;

$bonsai-breakpoints: (
  small: 0,
  medium: 560px,
  large: 760px,
  xlarge: 1024px,
  xxlarge: 1280px
) !default;
```

If there exists a defined breakpoint class in `$bonsai-breakpoint-classes` then it must be a breakpoint value in `$bonsai-breakpoints`.