与背景图像一起使用（Use with Background Images）

优质

小牛编辑

128浏览

2023-12-01

描述 (Description)

在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.	查询名称	媒体查询
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)`