CSS3 Media Queries在iPhone4和iPad上的运用

标签: css3 media queries | 发表时间:2014-01-06 16:01 | 作者:rayln
出处:http://www.iteye.com
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.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了。随着潮流走嘛。那么今天就扯到这了。如果大家有更好的经验,可以通过下面的评论与我们一起分享。

2012年04月16日更新:iPad 3 Media Query
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2)
{
  // your CSS
}
如需转载烦请注明出处:W3CPLUS

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [css3 media queries] 推荐:

HTML5实践 -- CSS3 Media Queries

- - 博客园_首页
  转载请注明原创地址: http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html.   demo查看地址: http://www.webdesignerwall.com/demo/media-queries/.   CSS2允许你对特定media类型制定样式,例如针对屏幕或者打印机.

CSS3 Media Queries的些野史外传

- BeerBubble - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1049. //zxx:本文是去年2010年,也就是去年8月24号一篇写了一半的草稿,正好时隔1年. 一、关于Media Queries这货. 去年我在制作“CSS3中文在线指南”时第一次见到该属性,当时的兴奋劲堪比路飞看到肉(最近在看海贼王),原来世界上竟有这等CSS属性,因为当时很多精力用在思考自适应布局与宽屏显示器下的页面布局,见此属性立马让我眼前一亮,青春绽放.

伪类+js实现CSS3 media queries跨界准确判断

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2387. 我们都知道,CSS3 media queries是 响应布局实现之利器. 国外很多著名的前端站点,如 css-tricks, smashingmagazinegazine等都采用了响应布局.

CSS3 Media Queries在iPhone4和iPad上的运用

- - Web前端 - ITeye博客
那么以后大家在iPhone4和iPad设备上,就可以按照横竖板来定样式了:. 上面四种CSS3 Media Queries就是用来对付iPhone4和iPad的,至于其他的运用,大家参考下面我重新整理的CSS3 Media Queries模板:. CSS3 Media Queries 模板:. 1、Smartphones (竖板和横板).

CSS Media Queries 模板

- - blog.moocss.com
CSS Media Queries 模板. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60.

CSS3 Media Queries 详细介绍与使用方法,Responsive Web Design 必备技术

- - Web前端 - ITeye博客
上一篇我们介绍了 Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到 Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成. 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援.

CSS4 Media Queries 新特性

- - 葵中剑's Blog - SwordAir.com
来自 css3.info 的消息,CSS4 Media Queries 已经成型,尽管它现在还只是一份 编辑草案,不过我们仍然可以从中看到新的 Media Queries 所具备的特质. 在 Changes Since the Media Queries Level 3 一节里,就能看到 CSS4 Media Queries 的新特性.

Respond.js – 让不懂爱的 IE6-8 支持 CSS3 Media Query

- - 博客园_梦想天空
  Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供多媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design). 20个非常绚丽的 CSS3 特性应用演示.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

ROI Media:反思网站设计

- - 中文互联网数据研究资讯中心
现在谁都可以轻松做一个网站,但根据ROI Media,只有4.13%的网站具备有效的HTML和CSS,更让人担忧的是只有40%的用户能在站点上找到他们需要的信息,这可能是用户自己的错,但也可能是由于糟糕的设计. Tencent CDC:工具型网站首页的设计思考. Hubspot:网站首页12大元素--信息图.