Allows you to define a media query based on the actual physical pixel width of the device to determine which image should be displayed. Similar to device-width but instead of using logical CSS pixels it uses the actual physical pixels.
Resize your screen resolution or orientation to see the image swap out.
<div data-picture data-alt="Picturefill test">
<div data-src="img/default.png"></div>
<div data-src="img/320x90.png" data-media="(min-device-pixel-width: 200px)"></div>
<div data-src="img/480x135.png" data-media="(min-device-pixel-width: 321px)"></div>
<div data-src="img/640x180.png" data-media="(min-device-pixel-width: 481px)"></div>
<div data-src="img/1024x228.png" data-media="(min-device-pixel-width: 641px)"></div>
<div data-src="img/1440x405.png" data-media="(min-device-pixel-width: 1025px)"></div>
<div data-src="img/1920x540.png" data-media="(min-device-pixel-width: 1441px)"></div>
<noscript><img src="img/noscript.png" alt="Picturefill test" /></noscript>
</div>
Need more info? View the project
Author: Tyson Matanich