title: Generic media queries for devices
body: <p>I'm looking for a list of generic CSS media queries to match phone (both portrait and landscape), tablet (both portrait and landscape) and desktop.
  I have found many posts with some generic media queries, but they are often different and maybe I don't understand them.</p>
  
  <p>For instance, the following query:</p>
  
  <pre><code>@media only screen and (max-width: 768px) { }
  </code></pre>
  
  <p>does it match all phones (portrait and landscape) and tablet portrait? Or what?</p>
  
  <p>I also found other examples, like the following:</p>
  
  <pre><code>/* mobile */
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
  /* tablet */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>/* mobile */
  @media screen and (max-width:767px) { }
  /* tablet */
  @media screen and (max-width:1024px) { }
  </code></pre>
  
  <p>Which of the previous queries are correct to correctly match phone (both portrait and landscape) and tablet (both portrait and landscape)?</p>
  
  <p>Thanks</p>