title: Clarity on responsive design pixel width
body: <p>New to responsive design and I'm trying to work something out.</p>
  
  <p>The Galaxy Note 2 has a pixel dimension of 1280 x 720 and I specify the following CSS:</p>
  
  <pre><code>@media (min-width:769px){
       #mobile{
           display:none;
       }
       #tablet{
           display:none;
       }
       #desktop{
           width:100px;
           float:left;
           background-color:green;
       }
   }
   @media (min-width:321px) and (max-width:768px){
       #desktop{
           display:none;
       }
       #tablet{
           width:100px;
           float:left;
           background-color:black;
           color:white;
       }
       #mobile{
           display:none;
       }
   }
  
   @media (max-width:320px){
       #desktop{
           display:none;
       }
       #mobile{
           width:100px;
           float:left;
           background-color:blue;
           color:white;
       }
       #tablet{
           display:none;
       }
   }
  </code></pre>
  
  <p>The phone (as expected) shows the mobile "version" of the site but I don't understand why it falls into the &lt;321px category when it has the dimension previously mentioned!</p>
  
  <p>The following code does this?</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
  </code></pre>
  
  <p>Hope for some help with this!
  Thanks :)</p>