css - 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 有什么区别？它是否仅适用于移动(max-device-width)或桌面(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) ... />
   

---

附言请原谅任何拼写或语法错误，英语不是我的母语

P.S.S.在我发布这个问题之前，我花了一段时间在 stackoverflow 上搜索并没有找到关于这个问题的信息。如果我错了，还有类似的问题，我会删除我的帖子。

Answer 1

1. css 文件中的规则可减少请求数量(提高性能)。

• max-width为目标显示区域的宽度

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

我知道的另一种定位纵向或横向的方法是像这样添加 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 */
}

要为宽度在 320 到 480 像素之间的移动设备定义样式表，您必须编写:

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