title: Which are the most important media queries to use in creating mobile responsive design?
body: <p>There are a lot different media queries for mobile screen sizes. It can be overwhelming to accomodate all of them when designing a responsive mobile site. Which are the most important ones to use when designing for mobile? I found this article that does a pretty good job of outlining the available media queries: <a href="http://css-tricks.com/snippets/css/media-queries-for-standard-devices/" rel="noreferrer">http://css-tricks.com/snippets/css/media-queries-for-standard-devices/</a>.</p>
  
  <pre><code>/* Smartphones (portrait and landscape) ----------- */
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px) {
  /* Styles */
  }
  
  /* Smartphones (landscape) ----------- */
  @media only screen 
  and (min-width : 321px) {
  /* Styles */
  }
  
  /* Smartphones (portrait) ----------- */
  @media only screen 
  and (max-width : 320px) {
  /* Styles */
  }
  
  /* iPads (portrait and landscape) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) {
  /* Styles */
  }
  
  /* iPads (landscape) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : landscape) {
  /* Styles */
  }
  
  /* iPads (portrait) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : portrait) {
  /* Styles */
  }
  
  /* Desktops and laptops ----------- */
  @media only screen 
  and (min-width : 1224px) {
  /* Styles */
  }
  
  /* Large screens ----------- */
  @media only screen 
  and (min-width : 1824px) {
  /* Styles */
  }
  
  /* iPhone 4 ----------- */
  @media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
  }
  </code></pre>