How to change CSS based on mobile device?

Question

In the following example, I want to display only one div, depending on the device.

I'm familiar with how to use @media to override a CSS class but not how to do a conditional.

<style type="text/css">    @media (max-width : 770px) {      ...    }    @media (max-width : 320px) {    ...   }   //do I need another for the desktop? </style>  //if desktop <div style="width: 400px; float: left;">     this is desktop     <a href="somepage.html"><img src="aLargeImage.png"/></a> </div>  //if mobile <div style="width: 200px; float: left;">     this is mobile     <a href="somepage.html">just text</a> </div> 

Any suggestions?

Answer 1

Here's an example of how it can be done conditionally without javascript:

//CSS .visibledevice {display:none;} .visibledesktop {display:display;}  @media (max-width : 320px) {     .visibledevice {display:block;}     .visibledesktop {display:none;} }  //in the page <div class="visibledesktop">this displays for desktop and tablet</div>  <div class="visibledevice">this displays for mobile</div>