CSS3 Media Queries在iPhone4和iPad上的运用
云端漂移 2014-01-06
http://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads
那么以后大家在iPhone4和iPad设备上，就可以按照横竖板来定样式了：
1、iPhone4竖板
@media
onlyscreenand(-webkit-min-device-pixel-ratio:1.5)and(orientation:portrait),
onlyscreenand(min-device-pixel-ratio:1.5)and(orientation:portrait){
/*你的样式写在这里*/
}
2、iPhone横板
@media
onlyscreenand(-webkit-min-device-pixel-ratio:1.5)and(orientation:landscape),
onlyscreenand(min-device-pixel-ratio:1.5)and(orientation:landscape){
/*你的样式写在这里*/
}
3、iPad竖板
@mediascreenand(max-device-width:768px)and(orientation:portrait){
/*你的样式写在这里*/
}
4、iPad横板
@mediascreenand(max-device-width:1024px)and(orientation:landscape){
/*你样式写在这里*/
}
上面四种CSS3MediaQueries就是用来对付iPhone4和iPad的，至于其他的运用，大家参考下面我重新整理的CSS3MediaQueries模板：
CSS3MediaQueries模板：
1、Smartphones(竖板和横板)
@mediaonlyscreenand(min-device-width:320px)and(max-device-width:480px){
/*你的样式写在这里*/
}
//===或者====//
<linkrel="stylesheet"href="smartphones.css"media="onlyscreenand(min-device-width:320px)and(max-device-width:480px)"/>
2、Smartphones(横板)
@mediaonlyscreenand(min-width:321px){
/*你的样式写在这里*/
}
//===或者====//
<linkrel="stylesheet"href="smartphones-landscape.css"media="onlyscreenand(min-width:321px)"/>
3、Smartphones(竖板)
@mediaonlyscreenand(max-width:320px){
/*你的样式写在这里*/
}
//===或者====//
<linkrel="stylesheet"href="smartphones-portrait.css"media="onlyscreenand(max-width:320px)"/>
4、iPad(竖板和横板)
@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px){
/*你的样式写在这里*/
}
//===或者====//
<linkrel="stylesheet"href="ipad.css"media="onlyscreenand(min-device-width:768px)and(max-device-width:1024px)"/>
5、iPad横板
@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:landscape){
/*你的样式写在这里*/
}
//===或者====//
<linkrel="stylesheet"href="ipad-landscape.css"media="onlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:landscape)"/>
6、iPad的竖板
@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:portrait){
/*你的样式写在这里*/
}
//===或者====//
<linkrel="stylesheet"href="ipad-portrait.css"media="onlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:portrait)"/>
7、Desktopsandlaptops
@mediaonlyscreenand(min-width:1224px){
/*你的样式写在这里*/
}
//===或者====//
<linkrel="stylesheet"href="desktops-and-laptops.css"media="onlyscreenand(min-width:1224px)"/>
8、Largescreens
@mediaonlyscreenand(min-width:1824px){
/*你的样式写在这里*/
}
//===或者====//
<linkrel="stylesheet"href="large-screens.css"media="onlyscreenand(min-width:1824px)"/>
9、iPone4
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-device-pixel-ratio:1.5){
/*你的样式写在这里*/
}
//===或者====//
<linkrel="stylesheet"href="iphone4.css"media="onlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-device-pixel-ratio:1.5)"/>
10、iPhone4竖板
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5)and(orientation:portrait),onlyscreenand(min-device-pixel-ratio:1.5)and(orientation:portrait){
/*你的样式写在这里*/
}
//===或者====//
<linkrel="stylesheet"href="iphone4-portrait.css"media="onlyscreenand(-webkit-min-device-pixel-ratio:1.5)and(orientation:portrait),onlyscreenand(min-device-pixel-ratio:1.5)and(orientation:portrait)"/>
11、iPhone4横板
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5)and(orientation:landscape),onlyscreenand(min-device-pixel-ratio:1.5)and(orientation:landscape){
/*你的样式写在这里*/
}
//===或者====//
<linkrel="stylesheet"href="iphone4-landscape.css"media="onlyscreenand(-webkit-min-device-pixel-ratio:1.5)and(orientation:landscape),onlyscreenand(min-device-pixel-ratio:1.5)and(orientation:landscape)"/>
上面罗列了常用的CSS3MediaQueries模板，特别是在移动设备上的几种，希望对大家在今后的移动开发端上的运用有所帮助。当然CSS3MediaQueries的运用条件往往不只这些，大家完全可以根据自己的需求去定义不同的条件，但个人建议，使用CSS3MediaQueries采用主流就Ok了。随着潮流走嘛。那么今天就扯到这了。如果大家有更好的经验，可以通过下面的评论与我们一起分享。
2012年04月16日更新：iPad3MediaQuery
@mediaonlyscreenand(min-device-width:1536px)and(max-device-width:2048px)and(-webkit-min-device-pixel-ratio:2)
{
//yourCSS
}
如需转载烦请注明出处：W3CPLUS
