title: How to change CSS based on mobile device?
body: <p>In the following example, I want to display only one <code>div</code>, depending on the device.  </p>
  
  <p>I'm familiar with how to use <code>@media</code> to override a CSS class but not how to do a conditional.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
     @media (max-width : 770px) {
       ...
     }
  
    @media (max-width : 320px) {
     ...
    }
    //do I need another for the desktop?
  &lt;/style&gt;
  
  //if desktop
  &lt;div style="width: 400px; float: left;"&gt;
      this is desktop
      &lt;a href="somepage.html"&gt;&lt;img src="aLargeImage.png"/&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  //if mobile
  &lt;div style="width: 200px; float: left;"&gt;
      this is mobile
      &lt;a href="somepage.html"&gt;just text&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any suggestions?</p>