交換命名的媒體查詢

描述

在 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

列印頁面