title: Is it possible to put CSS @media rules inline?
body: <p>I need to dynamically load banner images into a HTML5 app and would like a couple of different versions to suit the screen widths. I can't correctly determine the phone's screen width, so the only way I can think of doing this is to add background images of a div and use @media to determine the screen width and display the correct image.</p>
  
  <p>For example:</p>
  
  <pre><code> &lt;span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Is this possible, or does anyone have any other suggestions?</p>