compound media queries

Allows compound media queries to be used to determine which image source should be used.


Scale your browser's viewport to 480px or less on a device that has a device pixel ratio of 2 or higher (such as an iPhone 4) and compare the result to a device that has a device pixel ratio of less than 2.

Code sample

<div data-picture data-alt="Picturefill test"> <div data-src="img/default.png"></div> <div data-src="img/480x135.png" data-media="(max-width: 480px)"></div> <div data-src="img/1024x228.png" data-media="(max-width: 480px) and (min-device-pixel-ratio: 2.0)"></div> <div data-src="img/320x90.png" data-media="(max-width: 320px)"></div> <div data-src="img/640x180.png" data-media="(max-width: 320px) and (min-device-pixel-ratio: 2.0)"></div> <noscript><img src="img/noscript.png" alt="Picturefill test" /></noscript> </div>

Need more info? View the project
Author: Tyson Matanich