Interchange Named Media Queries

Description

In $breakpoints variable in SASS, you can define any breakpoint along with few keywords. It supports as a shorthand for the named queries for full CSS media queries.

You can include your own named media queries and can add them as properties to Foundation.Interchange.SPECIAL_QUERIES

Foundation.Interchange.SPECIAL_QUERIES['square'] = 'screen and (aspect-ratio: 1/1)';

Sr.No. Query Name Media Query
1 small 
screen and (min-width: 0em)
2 medium 
only screen and (min-width: 40em)
3 large 
only screen and (min-width: 64em)
4 xlarge 
only screen and (min-width: 75em)
5 xxlarge 
only screen and (min-width: 90em)
6 portrait 
screen and (orientation: portrait)
7 landscape 
screen and (orientation: landscape)
8 retina 
only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)
foundation_plugins.htm
Advertisements