web时代从1.0到2.0再到现在的3.0时代有了质的飞跃，而CSS时代也一样，CSS从98年XHTML到05年的CSS3的定制，在到进两年被流行，虽然W3C还没有正式公布，但已经快成为主流，各大浏览器也开始逐步支持。在 CSS2 中，你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表，而现在借助 CSS3 的 Media Queries 特性，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。
例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中，这样，在不改变文档内容的情况下，不同的设备可以呈现不同的界面外观。阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀网站案例。
Max Width
下面的样式会在可视区域的宽度小于 600px 的时候被应用。
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
如果你想链接到一个单独的样式表，把下面的代码放在
标签里。Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
Multiple Media Queries
你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width
下面的样式会在 max-device-width 是 480px 的设备上触发。(提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。)
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
For iPhone 4
下面的样式是为 iPhone 4 专门写的
For iPad
你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse)
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
