Picturefill is a polyfill (http://en.wikipedia.org/wiki/Polyfill) that mimics a proposed <picture>
element using <span>
or <div>
. You can find it at https://github.com/scottjehl/picturefill/. To test it, we can use our sample site structure. After downloading a package from GitHub, I copied picturefill.js
and external/matchmedia.js
into our /assets/js/
directory. Then I linked it from RWD_sample_picturefill.html
, which is a copy of RWD_sample.html
created in the first chapter. To link JavaScript code, just add the following lines of code:
<script src="assets/js/matchmedia.js"></script> <script src="assets/js/picturefill.js"></script>
The file matchmedia.js
contains the matchMedia()
polyfill available at https://github.com/paulirish/matchMedia.js/ for testing media queries in JS, and it is necessary to support the media attributes across browsers.
Now, I have to manually create...