CSS3 Media Queries行使要领详解

在css2中应承我们行使media的属性，譬喻行使screen和print，我也写过一篇关于行使CSS media的print来界说打印网页的样式的文章，关于css2中的media文章，保举下w3c的。本日来说说CSS3的Media Queries。CSS3中不只仅可以行使screen和print，并且支持多媒体多判别率的样式表。

我们先来看下CSS3 Media Queries的演示实例：css3media.html，来自于（Web Designer Wall）

Max Width

故名思意，就是最大宽度的意思，譬喻下面的代码是在宽度小于600px的时辰才执行的。

也可以在link标签内里行使media属性，即下面的写法：

Min Width

跟Max Width相反，是最小宽度，譬喻当宽度大于900px的时辰才运行下面的代码

@media screen and (min-width: 900px) {
.class {
background: #666;
}
}

也可以在link标签内里行使media属性，即下面的写法：

Max和Min组合行使

譬喻下面的代码是当屏幕的宽度在600px~900px之间才有用的：

Device Width

这里的意思指的是装备的最大宽度，就是屏幕的宽度，像素，譬喻下面的代码:

知道这些有啥用？

我们相识了CSS3的Media Queries的行使要领，就可以简朴的行使CSS来节制差异的赏识器乃至差异的装备（譬喻iPhone，iPad等）行使差异的CSS文件，可能差异的css代码。

在IE中行使CSS3的Media Queries

在IE家属中CSS3的Media Queries只用在IE8+的赏识器才获得支持，而中国海内份额最大的IE6、IE7是不支持的，不外我们可以通过下面保举的三篇教程要领来办理这个题目。

1. CSS Tricks – using jQuery to detect browser size
2. The Man in Blue – using Javascript
3. jQuery的 Media Queries 插件

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!