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
andmax-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 formax-width: 800px
andmax-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.