title: What measurement unit should I use for responsive design?
body: <p>I am new in responsive design and am trying to figure out how to layout plugins of a site in smartphones. here is an example:</p>
  
  <pre><code>@media (min-width: 568px) {
  .musicPlayer{
      width:600px;
      height:320px;
  }
  .Box, .List{
      float:left;        
  }
  .Box, .List{
      width:50%;
      height:100%;
  }
  }
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 568px) {
      .musicPlayer{
          width:600px;
          height:1200px;
      }
      .Box, .List{
          float:none;        
      }
      .Box, .List{
          width:100%;
          height:50%;
      }
  }
  </code></pre>
  
  <p>As you can see I set the width or the <code>.musicPlayer</code> to <code>600px</code>. When I checked it on iPhone it was almost half of the page. But the entire width of iPhone is 320px, so how come 600px is half of that?! Thats why I thought maybe in responsive design they use a different unit such as em. Any idea?
  Here is an example: <a href="http://goo.gl/Hje6XA" rel="nofollow">http://goo.gl/Hje6XA</a></p>