Wie kombiniert man mehrere Parameter in der Medienabfrage von Foundation 5 Interchange? - zurb-foundation

Im die Dokumente sagt "Sie können sogar mehrere Parameter in der Medienabfrage kombinieren, wenn es sein muss", aber es gibt keine Beispiele.

Ich habe verschiedene Wege ausprobiert, kann aber nichts finden, was funktioniert:

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

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

Beides gibt mir retina-landscape-image.jpg, also sind beide Bedingungen wahr, das Problem liegt in der Syntax für beide Bedingungen anfordern.

Ich weiß, dass ich eine kundenspezifische Abfrage machen kann, aber wenn die Dokumente sagen, dass Sie es tun können, muss es irgendwie.

Antworten:

0 für die Antwort № 1

Ich glaube nicht, dass Sie derzeit in der Lage sind zu verwendenmehrere "benannte Abfragen" in einer einzigen Klausel, da ich glaube nicht, dass der Austausch diese verkettet. Interchange nimmt diese Zeichenfolge und sucht dann nach der Medienabfrage, die damit verknüpft ist, sei es retina oder large, aber es verarbeitet derzeit kein Konzept des AND-Operators.

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

Sie können jedoch immer noch erreichen, was Sie wollen, aber indem Sie die rohe Medienabfrage anstelle der "named query" -Austauschreferenzen gegen setzen.

Von dem Foundation Interchange-DokumenteSie können die verknüpfte Medienabfrage sowohl mit Querformat als auch mit Retina anzeigen. Sie müssen diese nur in einer einzigen Abfrage verketten.

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)

Landschaft:

only screen and (orientation: landscape)

Kombiniert diese

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)

Ich weiß es ist sehr ausführlich, aber das retina media fragt nach dir! Schließlich, wenn Sie diese Zeichenfolge in Austausch einfügen würden ..

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

Du würdest geschäftlich sein!


Verwandte Fragen