Question

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

对于不同分辨率声明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 之间有什么区别？它是否仅适用于移动设备（max-device-width）或桌面设备（max-width）？
如果我为分辨率为1280x800的平板电脑编写媒体查询规则，用户也可以使用纵向/横向模式，它应该如何显示？我应该为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。请原谅任何拼写或语法错误，英语不是我的第一语言

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

Answer 1

css文件中的规则，以减少请求数量（更好的性能）。
- 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缺少等号，＆lt; 6个字符限制。 Mods，请删除它。感谢

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

1 个答案: