名前付きメディアクエリの交換

説明

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)

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-interchange-media-queries

名前付きメディアクエリの交換

説明