Responsive Match Media

In this example we demonstrate how to execute a media query from Javascript. We take a mobile up approach and in the basic page the list of albums doesn't contain the thumbnails. We assume this is the most optimal design for small mobile devices with a viewport width of less than 50em. For devices with a wider display we can show the thumbnails. We do that by inserting the src elements in the DOM tree using JS.

  %li(data-img = "cover1.jpg")
  %li(data-img = "cover2.jpg")
    The Beatles
  %li(data-img = "cover3.jpg")
%li(data-img = "cover4.jpg")
$(function() {
  if(window.matchMedia(" (min-width: 50em) ").matches) {
    $("[data-img]").each(function(i,val) {
      var img = new Image();
      img.src = $(val).data('img');