使用max-width
@media screen and (max-600px){ //你的样式放在这里.... } 使用min-width
@media screen and (min-900px){ //你的样式放在这里... } max-width和min-width的混合使用
@media screen and (min-600px) and (max-900px){ //你的样式放在这里... }
同时CSS3MediaQueries还能查询设备的宽度“device-width”来判断样式的调用，这个主要用在iPhone,iPads设备上，比如像下面的应用：
iPhone和Smartphones上的运用
/*iPhoneandSmartphones(portraitandlandscape)*/
@media screen and (min-device-320px) and (max-device-480px){ //你的样式放在这里... }
max-device-width指的是设备整个渲染区宽度（设备的实际宽度）
iPads上的运用
/*iPads(landscape)*/
@media screen and (min-device-768px) and (max-device-1024px) and (orientation:landscape){ //你的样式放在这里... }
/*iPads(portrait)*/
@media screen and (min-device-768px) and (max-device-1024px) and (orientation:portrait){ //你的样式放在这里... }
针对移动设备的运用，如果你想让样式工作得比较正常，需要在“<head>”添加“viewport”的meta标签：
<metaname="viewport" content="width=device-width,initial-scale=1.0" /> 有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相关总结。
调用独立的样式表
你可能希望在不同的设备下调用不同的样式文件，方便管理或者维护，那么你可以按下面的这种方式进行调用：
<linkrel="stylesheet" media="screen and (min-device-320px) and (max-device-480px)" href="iphone.css"/>
<linkrel="stylesheet" media="screen and (min-device-768px) and (max-device-1024px)" href="ipad.css"/>
CSS3MediaQueries在标准设备上的运用
下面我们一起来看看CSS3MeidaQueries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：
1、1024px显屏
@media screen and (max-1024px){ /*CSSStyles*/ }
2、800px显屏
@media screen and (max-800px){ /*CSSStyles*/ }
3、640px显屏
@media screen and (max-640px){ /*CSSStyles*/ }
4、iPad横板显屏
@media screen and (max-device-1024px) and (orientation:landscape){ /*CSSStyles*/ }
5、iPad竖板显屏
@media screen and (max-device-768px) and (orientation:portrait){ /*CSSStyles*/ } iPhone和Smartphones
@media screen and (min-device-320px) and (min-device-480px){ /*CSSStyles*/ }
现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：
//Landscapephonesanddown
@media (max-480px){...} //Landscapephonetoportraittablet @media(max-768px){...}
//Portraittablettolandscapeanddesktop
@media (min-768px) and (max-980px){...}
//Largedesktop
@media (min-1200px){..}
在bootstrap中的responsive.css采用的是网格布局，大家可以到官网查看或下载其源码进行学习。另外960gs为大家提供了一个Adapt.js也很方便的帮大家实现上述效果。感兴趣的同学可以去了解了解。
下面给大家提供几个这方面的案例，以供大家参考：
《CSS3MediaQueries案例——Hicksdesign》
《CSS3MediaQueries案例——TeeGallery》
《CSS3MediaQueries案例——AListApart》
更新CSS3MediaQueries模板查询
1、Smartphones(portraitandlandscape)
@media only screen and (min-device-320px) and (max-device-480px){ /*Styles*/}
2、Smartphones(landscape)
@media only screen and(min-321px){ /*Styles*/}
3、Smartphones(portrait)
@media only screen and (max-320px){ /*Styles*/}
4、iPads(portraitandlandscape)
@media only screen and (min-device-768px) and (max-device-1024px){ /*Styles*/}
5、iPads(landscape)
@media only screen and (min-device-768px) and (max-device-1024px) and (orientation:landscape){ /*Styles*/}
6、iPads(portrait)
@media only screen and (min-device-768px) and (max-device-1024px) and (orientation:portrait){ /*Styles*/}
7、iPhone4
@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-640px){ /*CSSStyles*/}
9、800px显屏
@media screen and (max-800px){ /*CSSStyles*/}
10、1024显屏
@media screen and (max-1024px){ /*CSSStyles*/}
11、Desktopsandlaptops
@media only screen and (min-1224px){ /*Styles*/}
12、Largescreens
@media only screen and (min-1824px){ /*Styles*/}
那么有关于CSS3MediaQueries模板的相关介绍就说到这里了，最后希望大家喜欢。