CSS3 Media Queries在iPhone4和iPad上的运用
http://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads


那么以后大家在iPhone4和iPad设备上，就可以按照横竖板来定样式了：

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.