在CSS3中使用媒体查询的最佳做法是什么？

我正在寻找关于 CSS3功能的一些问题的答案 – 媒体查询：

>对于不同的分辨率声明css规则,哪种方式更好(对于浏览器由于性能)？

//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
}

> max-device-width和max-width有什么区别？它是否仅适用于移动(最大设备宽度)或桌面(最大宽度)浏览器的规则？
>如果我为分辨率为1280×800的平板电脑编写媒体查询规则,用户也可以使用纵向/横向模式,它应该如何显示？我应该为max-width编写规则：800px和max-width：1280px还是有另一种方法？
>如果我写规则,我应该写这样的东西：

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

或者改为这两个：

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

附：请原谅任何拼写或语法错误,英语不是我的第一语言
P.S.S.在我发布此问题之前,我花了一些时间来搜索stackoverflow并且没有找到有关此问题的信息.如果我错了,有类似的问题,我会删除我的帖子.

解决方法

> css文件中的规则,以减少请求数量(更好的性能).
>
> max-width是目标显示区域的宽度
> max-device-width是设备整个渲染区域的宽度

3.
我所知道的另一种定位肖像或风景的方法是添加这样的方向：

/* 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.
要为宽度在320到480像素之间的移动设备定义样式表,您必须编写：

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

// 1缺少等号,< 6个字符限制. Mods,请删除它.谢谢