Databases
StackOverflow2013
Postsdbo
POWhat is the best practice with media-queries in CSS3?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat is the best practice with media-queries in CSS3?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload