Media Queries

CSS media queries allow us to adjust the display and orientation of content at different screen sizes.


Default Media Queries

Foundation for Apps has three core breakpoint ranges, which you may recognize from Foundation for Sites.

Many components can be modified at different screen sizes using special breakpoint classes. For example, this HTML creates a menu bar that is vertical on small screens, and horizontal on medium-sized screens and larger.

The understanding of breakpoints is most important when working with the grid, which helps you create your responsive app layouts.


Changing the Breakpoints

The names of breakpoints, and their widths, are stored in a $breakpoints variable in your settings file.

$breakpoints: ( small: rem-calc(0), medium: rem-calc(640), large: rem-calc(1200), xlarge: rem-calc(1440), xxlarge: rem-calc(1920), );

Changing the widths of any of the breakpoints is as easy as changing the pixel values in this map. Note that here there are two extra breakpoints: xlarge and xxlarge. We don't use these for any components, and also don't output any CSS classes that use them by default.

You can change that by modifying the $breakpoint-classes variable in your settings file. This is a list of breakpoint names. Adding or removing names from the list will change the CSS class output. It looks like this by default:

$breakpoint-classes: (small medium large);

For example, to get xlarge classes in your CSS, for use in the grid, menu bar, and more, just add it to the end of the list:

$breakpoint-classes: (small medium large xlarge);

The Breakpoint Mixin

Our breakpoint() mixin makes it easy to write media queries. You can use the named breakpoints or a custom pixel, rem, or em value.

To use the mixin, call it with @include, and then pass in the CSS content you want inside the curly braces.

.element { // Only affects medium screens and larger @include breakpoint(medium) { // All CSS in here goes inside the media query } }

The behavior of the media query can be changed by adding the keyword down or only after the breakpoint value, separated by a space.

.element { // Only affects medium screens and smaller @include breakpoint(medium down) { } // Only affects medium screens, not small or large @include breakpoint(medium only) { } }

It's also possible to pass in custom values. You can enter a px, rem, orem value—in the end, the value will be converted to em.

.element { // Converted to 20em @include breakpoint(320px) { } // Unitless values are assumed to be pixels @include breakpoint(320) { } // Converted to 40em @include breakpoint(40rem) { } }

Lastly, there are two special media queries that are not width-based: portrait, landscape, and retina. Using these keywords with the breakpoint() mixin will output a media query for device orientation or pixel density, rather than screen width.

.element { @include breakpoint(landscape) { // CSS for landscape-oriented devices only } @include breakpoint(retina) { // CSS for high-resolution displays only } }