如何组合foundation 5立交媒体查询中的多个参数？

Question

In the docs说“如果需要，你甚至可以在媒体查询中组合多个参数”，但没有例子。

我尝试了不同的方法，但找不到任何有效的方法：

<div data-interchange="
            [/path/to/default.jpg, (default)], 
            [/path/to/retina-landscape-image.jpg, (retina landscape)],
            [/path/to/retina-landscape-image.jpg, (retina, landscape)],
            [/path/to/retina-landscape-image.jpg, (retina and landscape)],
            [/path/to/retina-landscape-image.jpg, (retina), (landscape)],
            [/path/to/retina-landscape-image.jpg, (retina) and (landscape)],
            [/path/to/retina-landscape-image.jpg, (retina) (landscape)]"></div>

给了我default.jpg

<div data-interchange="
            [/path/to/default.jpg, (default)], 
            [/path/to/retina-landscape-image.jpg, (retina)]"></div>

        <div data-interchange="
            [/path/to/default.jpg, (default)], 
            [/path/to/retina-landscape-image.jpg, (landscape)]"></div>

两者都给了我retina- so image.jpg，所以这两个条件都是真的，问题出在请求这两个条件的语法中。

我知道我可以进行自定义查询，但如果文档上说您可以这样做，那就必须以某种方式实现。

Answer 1

我认为你目前不能在一个子句中使用多个“命名查询”，因为我不相信interchange支持连接这些查询。Interchange将获取该字符串，然后查找与其关联的媒体查询，无论是retina还是large，但它目前不处理任何AND运算符的概念。

div data-interchange="[/path/to/default.jpg, (default)], [/path/to/retina-landscape-image.jpg, (retina)]"></div

然而，你仍然可以实现你想要的东西，但是通过放入原始的媒体查询而不是“命名查询”交换引用。

从Foundation Interchange docs中，您可以看到与景观和视网膜相关联的媒体查询，您只需将它们连接到一个查询中。

视网膜

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)

景观：

only screen and (orientation: landscape)

将它们结合起来

only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (min--moz-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (-o-min-device-pixel-ratio: 2/1) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (min-resolution: 192dpi) and (orientation: landscape),
only screen and (min-resolution: 2dppx) and (orientation: landscape)

我知道这很冗长，但这是对你的视网膜媒体查询！最后，如果要将此字符串放入interchange..

<div data-interchange="[/path/to/default.jpg, (default)], [/path/to/retina-landscape-image.jpg, (only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (min--moz-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (-o-min-device-pixel-ratio: 2/1) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (min-resolution: 192dpi) and (orientation: landscape),
only screen and (min-resolution: 2dppx) and (orientation: landscape))]"></div>

你就可以开始做生意了！