foundation-sites-5/doc/pages/media-queries.html

**This package is only for versions 5 and earlier of Foundation. As of version 6, the package has a new name: `foundation-sites`.**

---
title: Media Queries
---

<h3 class="subheader">We keep media queries fairly simple in Foundation and let the percentage-based grid do the heavy lifting across various screen sizes.</h3>

***

<h3>Basic</h3>

Media queries are built using ems in Foundation. At some point in time we will move to rem's, however, at the moment not all browsers like rem's in media queries.

<h4>CSS</h4>

```scss
// Small screens
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
```

***

### Customize With Sass

Media queries can be easily customized by changing the variable values in `_settings.scss`.

<h4>SCSS</h4>

```scss
// Here we define the breakpoints which will become the upper border for each media size.
// The function em-calc() calculates the em-value from a px-value.
$small-breakpoint:  em-calc(640)  !default;
$medium-breakpoint: em-calc(1024) !default;
$large-breakpoint:  em-calc(1440) !default;
$xlarge-breakpoint: em-calc(1920) !default;

// Here we define the lower and upper bounds for each media size
$small-range:   (0, $small-breakpoint) !default; /* 0, 640px */
$medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint) !default; /* 641px, 1024px */
$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint)  !default; /* 1025px, 1440px */
$xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint) !default; /* 1441px, 1920px */
$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default; /* 1921px, ... */

// Media Queries
$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

$retina: (
  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
  "#{$screen} and (min-device-pixel-ratio: 2)",
  "#{$screen} and (min-resolution: 192dpi)",
  "#{$screen} and (min-resolution: 2dppx)"
);
```

<h3>Style With Sass</h3>

Use these media queries with the variables specified above.

<h4>SCSS</h4>

```scss
@media #{$small-up} { }
@media #{$small-only} { }

@media #{$medium-up} { }
@media #{$medium-only} { }

@media #{$large-up} { }
@media #{$large-only} { }

@media #{$xlarge-up} { }
@media #{$xlarge-only} { }

@media #{$xxlarge-up} { }
@media #{$xxlarge-only} { }
```