title: Media queries give a headache
body: <p>My main smartphone is a Galaxy S8 Plus.</p>
  
  <p>The media queries for this device are: </p>
  
  <pre><code>@media only screen and (min-width: 360px) and (orientation: portrait)
  </code></pre>
  
  <p>Let's start with the portrait orientation. This one, I'm understanding 100%, but here comes the problem.
  This is the media query for landscape:</p>
  
  <pre><code>@media only screen and (min-width: 740px) and (orientation: landscape)
  </code></pre>
  
  <p>Everytime I code in this media query it applies to my desktop which has a 1920 * 1200 resolution. I know it's influenced by the <code>min-width: 740px</code>.</p>
  
  <p>Now, my question is are:</p>
  
  <ul>
  <li>How do I tackle this problem?</li>
  <li><p>Can I create a single query that covers both portrait and landscape?</p></li>
  <li><p>If so , what are the best practices for units in responsive web design? Right now I'm using vh and vw in my project, but I think it creates a mess sometimes.</p></li>
  <li><p>And one last question: how do I cover most devices out there with a minimal use of queries?</p></li>
  </ul>