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

Question

我正在寻找有关CSS3功能的一些问题的答案 - Media Queries:

1. 对于不同分辨率声明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
   }
   

2. max-device-width和之间有什么区别max-width？是否只针对mobile(max-device-width)或desktop(max-width)浏览器解决了规则？

3. 如果我为具有分辨率的平板电脑编写媒体查询规则1280x800,用户也可以使用纵向/横向模式,它应该如何看？我应该为其编写规则max-width: 800px,max-width: 1280px还是有另一种方式？

4. 如果我写规则,我应该写这样的东西:

   <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) ... />
   

---

PS请原谅任何拼写或语法错误,英语不是我的第一语言

P.SS在我发布这个问题之前,我花了一些时间来搜索stackoverflow并且没有找到关于这个问题的信息.如果我错了,有类似的问题,我会删除我的帖子.

Answer 1

1. css 文件中的规则以减少请求数量（更好的性能）。

2. • max-width 是目标显示区域的宽度

   • max-device-width 是设备整个渲染区域的宽度

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

/* 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，请删除它。谢谢