CSS3 Media Queries模板
CSS3 Media Queries一般都是使用“max-width”和“min-width” 两个属性来检查各种设备的分辨大小与样式表所设条件是否满足，如果满足就调用相应的样式。打个比方来说，如果你的Web页面在960px的显屏下显示，那 么首先会通过CSS3 Media Queries进行查询，看看有没有设置这个条件样式，如果找到相应的，就会采用对应下的样式，其他的设备是一样的道理。下面具体看看“max- width”和“min-width”模板：
使用max-width
@media screen and (max-width: 600px) {
//你的样式放在这里....
}
使用min-width
@media screen and (min-width: 900px) {
//你的样式放在这里...
}
max-width和min-width的混合使用max-width和min-width的混合使用
@media screen and (min-width: 600px) and (max-width: 900px) {
//你的样式放在这里...
}
同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用，这个主要用在iPhone,iPads设备上，比如像下面的应用：
iPhone和Smartphones上的运用
/* iPhone and Smartphones (portrait and landscape) */
@media screen and (min-device-width : 320px) and (max-device-width: 480px) {
//你的样式放在这里...
}
max-device-width指的是设备整个渲染区宽度（设备的实际宽度）
iPads上的运用
/* iPads (landscape) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
//你的样式放在这里...
}
/* iPads (portrait) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
//你的样式放在这里...
}
针对移动设备的运用，如果你想让样式工作得比较正常，需要在“<head>”添加“viewport”的meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相关总结。
调用独立的样式表
你可能希望在不同的设备下调用不同的样式文件，方便管理或者维护，那么你可以按下面的这种方式进行调用：
<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" /> <link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />
CSS3 Media Queries在标准设备上的运用
下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：
1、1024px显屏
@media screen and (max-width : 1024px) {
/* CSS Styles */
}
4、iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* CSS Styles */
}
5、iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* CSS Styles */
}
iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* CSS Styles */
}
现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
// Large desktop
@media (min-width: 1200px) { .. }
在bootstrap中的responsive.css采用的是网格布局，大家可以到官网查看或下载其源码进行学习。另外960gs为大家提供了一个Adapt.js也很方便的帮大家实现上述效果。感兴趣的同学可以去了解了解。
下面给大家提供几个这方面的案例，以供大家参考：
- 《CSS3 Media Queries案例——Hicksdesign》
- 《CSS3 Media Queries案例——Tee Gallery》
- 《CSS3 Media Queries案例——A List Apart》
更新CSS3 Media Queries模板查询
1、Smartphones (portrait and landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
2、Smartphones (landscape)
@media only screen and (min-width : 321px) {
/* Styles */
}
3、Smartphones (portrait)
@media only screen and (max-width : 320px) {
/* Styles */
}
4、iPads (portrait and landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
5、iPads (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
6、iPads (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
7、iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
8、640px显屏
@media screen and (max-width : 640px) {
/* CSS Styles */
}
11、Desktops and laptops
@media only screen and (min-width : 1224px) {
/* Styles */
}
12、Large screens
@media only screen and (min-width : 1824px) {
/* Styles */
}
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
