What is the best practice with media-queries in CSS3?

Question

I'm looking answers for some questions about CSS3 feature - Media Queries:

1. Which way is better (for browser due to the performance) for declaring css rules for different resolutions?

   //this in head:
   <link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
   
   //or this in css file:
   @media only screen and (max-width: 1024px){
       //styles here
   }
   

2. What is difference between max-device-width and max-width? Is it only rule addressed for mobile(max-device-width) or desktop(max-width) browsers?

3. If I write media query rule for tablet with resolution 1280x800 where user can also use portrait/landscape mode, how should it look? I should write rules for max-width: 800px and max-width: 1280px or there is another way?

4. If I write rules I should write something like this:

   <link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... />
   

   or instead this two:

   <link ... media="only screen and (max-device-width: 480px) ... />
   <link ... media="only screen and (max-device-width: 1024px) ... />
   

---

P.S. Please excuse any spelling or grammatical mistakes, English isn't my first language

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.

Answer 1

1. Rules in css file to reduce number of requests (better for performance).

2. • max-width is the width of the target display area

   • max-device-width is the width of the device's entire rendering area

3. The another way I know to target portrait or landscape is to add orientation like this:

/* portrait */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {
    /* styles here */
}

/* landscape */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) {
    /* styles here */
}

4. To define a stylesheet for mobile devices with a width between 320 and 480 pixels you have to write:

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css">

// 1 Equal sign was missing, < 6 chars limit. Mods, please remove this. Thanks