title: What is the best practice with media-queries in CSS3?
body: <p>I'm looking answers for some questions about CSS3 feature - <strong><code>Media Queries</code></strong>:</p>
  
  <ol>
  <li><p>Which way is <strong>better</strong> (for browser due to the performance) for declaring css rules for different resolutions?</p>
  
  <pre><code>//this in head:
  &lt;link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" /&gt;
  
  //or this in css file:
  @media only screen and (max-width: 1024px){
      //styles here
  }
  </code></pre></li>
  <li><p>What is difference between <strong><code>max-device-width</code></strong> and <strong><code>max-width</code></strong>? Is it only rule addressed for mobile(<code>max-device-width</code>) or desktop(<code>max-width</code>) browsers?</p></li>
  <li><p>If I write media query rule for tablet with resolution <code>1280x800</code> where user can also use portrait/landscape mode, how should it look? I should write rules for <code>max-width: 800px</code> and <code>max-width: 1280px</code> or there is another way?</p></li>
  <li><p>If I write rules I should write something like this:</p>
  
  <pre><code>&lt;link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... /&gt;
  </code></pre>
  
  <p>or instead this two:</p>
  
  <pre><code>&lt;link ... media="only screen and (max-device-width: 480px) ... /&gt;
  &lt;link ... media="only screen and (max-device-width: 1024px) ... /&gt;
  </code></pre></li>
  </ol>
  
  <p><br/><hr/>
  <em>P.S. Please excuse any spelling or grammatical mistakes, English isn't my first language</em> <br/><br/>
  <em>P.S.S. Before I posted this question I spend a while to search on stackoverflow and didn't find information about this question. If I was wrong and there is similar question I will delete my post.</em></p>