Is it possible to put CSS @media rules inline?

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.

For example:

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

Is this possible, or does anyone have any other suggestions?

12 Answers
12

Leave a Comment