title: When using @media queries, does a phone load non-relevent queries and images?
body: <p>If I base my CSS on mobile styling, then use <code>@media</code> queries for gradually larger displays (tablets, desktops etc), will the mobile devices use the desktop styles?</p>
  
  <p>I believe that typically, mobile devices will load all images even if they don't apply to its own particular media size. Meaning it will load all images and hide ones not matching its query-based stylesheet.</p>
  
  <p>What I am trying to do is use one background for the larger version of the site:</p>
  
  <pre><code>.splash {
      background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
  }
  </code></pre>
  
  <p>and another for the mobile version: </p>
  
  <pre><code>.splash {
      background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
  }
  </code></pre>
  
  <p>If I apply the mobile CSS before any media queries, and add the large media CSS below using a query like <code>@media screen and (min-device-width: 481px) {...}</code>, will mobile devices load the large image too?</p>