CSS3 Media Queries在iPhone4和iPad上的运用

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

相关推荐