I know I could use device channels to do this, but is there a way to get right image rendition with media queries?
item display template
<div class="image">
<style>
@media only screen and (max-width: 320px) {
#image {
background-image: _=#image#=_?RenditonID=1);
}
}
@media only screen and (min-width: 320px) {
#image {
background-image: _=#image#=_?RenditonID=2);
}
}
</style>
</div>
=#image#= is a variable so I can't put the media queries inside a css file
Would this work? Do the server send both pictures or would only one of those get out to the client? If both are sent from the server to the client, is there a way to only send the correct one?