Picturefill

compound media queries

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

Instructions

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