- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
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