Menu icon Foundation
Interchange multiple media queries

Hi,

I would to know if it is possible combining interchange media queries. I'm talking about adding 'retina' mq to another mq, like in the example below:

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/default@2x.jpg, (retina)], [/path/to/large.jpg, (large)], [/path/to/large@2x.jpg, (large retina)]"> 

Of course, the syntax above seems not working. Anyone can say if there's a standard syntax to add retina mq to another mq or the only solution is to go with declaring custom media queries?

interchangemedia queriesretina

Hi,

I would to know if it is possible combining interchange media queries. I'm talking about adding 'retina' mq to another mq, like in the example below:

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/default@2x.jpg, (retina)], [/path/to/large.jpg, (large)], [/path/to/large@2x.jpg, (large retina)]"> 

Of course, the syntax above seems not working. Anyone can say if there's a standard syntax to add retina mq to another mq or the only solution is to go with declaring custom media queries?

Karl Ward over 5 years ago

I am not sure you can add multiple named queries like (large retina). If it did, the output of the named queries would be something like this: "only screen and (min-width: 1024px) and only screen and (-webkit-min-device-pixel-ratio: 2) ...". I wouldn't count on it ...

The 2nd query you have should work, unless it is invalidated by an error with the 3rd one. Perhaps try a custom query instead of a named one just to check if it works? You could always create your own custom named queries. Try on a retina device with chrome or safari:

<img data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))], [/path/to/bigger-image.jpg, (only screen and (-webkit-min-device-pixel-ratio: 2))]">