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

Question

I'm looking answers for some questions about CSS3 feature - Media Queries:
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
}
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?
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?
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

Rules in css file to reduce number of requests (better for performance).
max-width is the width of the target display area
max-device-width is the width of the device's entire rendering area
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 */
}
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">

Answer 2

I'am searching for good information about best practices in responsive design and I'll give you an advice.
In This question the developer get into a problem when he use CSS portrait condition and make the keyboard appears when he choose a input text of the document. I'm not sure why but it breaks the portrait condition.
In This website you can find information about better practices when you are creating media query's which I think are the best. Personaly I'll use the Exclusive type of media query in my website.
But by the other hand you could follow This site recomendations. I think that they are right but I prefer to create and use popular device dimentions media query's by myself.
Here is the list:
< 480px (which applies to older, smaller smartphone screen sizes)
< 768px, which is ideal for larger smartphones and smaller tablets
768px, which applies for everything bigger such as large tablet screens and desktops screens.
Also, these can be used too if you've got the energy and time:
<320px, which is great for older small, low res phones
1024px stylesheet for wide screens on desktops.
I hope it help you.