CSS3 Media Queries 模板

　Media Queries的引入，其作用就是允许添加表达式用以确定媒体的情况，以此来应用不同的样式表。换句话说，Media Queries允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备，以此加强体验。所以Media Queries和CSS优化没有关系，甚至是矛盾的。

1、iPhone4竖板

@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){ /*你的样式写在这里*/ }

2、iPhone横板

@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape), only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){ /*你的样式写在这里*/ }

3、iPad竖板

@media screen and (max-device-width: 768px) and (orientation: portrait) { /*你的样式写在这里*/ }

4、iPad横板

@media screen and (max-device-width: 1024px) and (orientation: landscape) { /*你样式写在这里*/ }

上面四种CSS3 Media Queries就是用来对付iPhone4和iPad的，至于其他的运用，大家参考下面我重新整理的CSS3 Media Queries模板：

CSS3 Media Queries 模板：

1、Smartphones (竖板和横板)

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="smartphones.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)" />

2、Smartphones (横板)

@media only screen and (min-width : 321px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="smartphones-landscape.css" media="only screen and (min-width : 321px)" />

3、Smartphones (竖板)

@media only screen and (max-width : 320px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="smartphones-portrait.css" media="only screen and (max-width : 320px)" />

4、iPad(竖板和横板)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />

5、iPad横板

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />

6、iPad的竖板

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" />

7、Desktops and laptops

@media only screen and (min-width : 1224px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="desktops-and-laptops.css" media="only screen and (min-width : 1224px)" />

8、Large screens

@media only screen and (min-width : 1824px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="large-screens.css" media="only screen and (min-width : 1824px)" />

9、iPone4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5)" />

10、iPhone4竖板

@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){ /*你的样式写在这里*/ } //===或者====// < link rel="stylesheet" href="iphone4-portrait.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait)" />

11、iPhone4横板

@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){ /*你的样式写在这里*/ } //===或者====// < link rel="stylesheet" href="iphone4-landscape.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape)" />

上面罗列了常用的CSS3 Media Queries模板，特别是在移动设备上的几种，希望对大家在今后的移动开发端上的运用有所帮助。当然CSS3 Media Queries的运用条件往往不只这些，大家完全可以根据自己的需求去定义不同的条件，但个人建议，使用CSS3 Media Queries采用主流就Ok了。

如需转载烦请注明出处：W3CPLUS