--- name: media-queries url: /media-queries title: 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.
The names of breakpoints, and their widths, are stored in a $breakpoints
variable in your settings file.
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:
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:
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.
The behavior of the media query can be changed by adding the keyword down
or only
after the breakpoint value, separated by a space.
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
.
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.