彻底弄明白CSS3的Media Queries(跨平台设计)

div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}

div#header h1 {
font-size: 140%;
}

#content {
float: none;
width: 100%;
}

#navigation {
float:none;
width: auto;
}
}

code hosted by snipt.net

@media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
 div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
 div#header h1 {
font-size: 140%;
}
 #content {
float: none;
width: 100%;
}
 #navigation {
float:none;
width: auto;
}
}

code hosted by snipt.net

@media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
 div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
 div#header h1 {
font-size: 140%;
}
 #content {
float: none;
width: 100%;
}
 #navigation {
float:none;
width: auto;
}
}

最终，我们在小屏幕设备上得到了如下显示效果：

使用 Media Queries 链接单独的 CSS 文件

对于小型的改动，直接在 CSS 代码中插入移动设备代码分支是很方便的，但对于大型站点，可以使用 Media Queries 链接独立的式样表文件，以便在独立的式样表文件中完全自由地为小设备编写 CSS 代码，方法如下：

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

code hosted by snipt.net

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

code hosted by snipt.net

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

测试 Media Queries

要在不同设备上测试 Media Queries 并非易事，你要有各种设备，还要将代码上传到某个主机进行访问测试。这里有一个在线服务，ProtoFluid，该服务允许你提供你要测试的网站的 URL，或者你本机上的 URL，然后，模拟 iPhone 等移动设备显示你的设计，下图是上文中提到的 dConstruct 网站在 ProtoFluid 的 iPhone 模拟中显示的样子。你也可以填写你自己的窗口尺寸，来模拟特定的设备。