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