Question

在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-landscape-image.jpg，所以两个条件都是真的，问题在于请求两种条件的语法。

我知道我可以制作一个自定义查询，但如果文档说你可以做到这一点，那么必须有办法。

Answer 1

我认为您目前无法使用多个命名查询＆＃39;在一个条款中，因为我不相信交换支持连接这些。 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)

我知道它非常冗长，但那个视网膜媒体会向您询问！最后，如果你要把这个字符串换成..

<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>

你在做生意！

如何在基础5交换的媒体查询中组合多个参数？

1 个答案: