交换命名的媒体查询

描述

在 SASS 中的 $breakpoints 变量中，你可以定义任何断点以及几个关键字。它支持完整 CSS 媒体查询的命名查询的速记。

你可以包括你自己的命名媒体查询，并将其作为属性添加到 Foundation.Interchange.SPECIAL_QUERIES

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


screen and (min-width: 0em)
only screen and (min-width: 40em)
only screen and (min-width: 64em)
only screen and (min-width: 75em)
only screen and (min-width: 90em)
screen and (orientation: portrait)
screen and (orientation: landscape)
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)

序号	查询名称	媒体查询
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

打印页面