accepted

Another useful media feature is device-aspect-ratio.

Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.

iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPhone 6:
@media screen and (device-aspect-ratio: 667/375) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

media query的更多相关文章

  1. 一种让 IE6/7/8 支持 media query 响应式设计的方法

    在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...

  2. iPhone CSS media query（媒体查询）

    iPhone5  iPhone6  iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-a ...

  3. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  4. viewport和media query

    viewport: 你可以定义viewport的宽度.如果你不使用width=device-width,在移动端上你的页面延伸会超过视窗布局的宽度(width=980px),如果你使用了width=d ...

  5. media query学习笔记

    原文转自:http://blog.csdn.net/renfufei/article/details/19981133 http://www.cnblogs.com/softlover/archive ...

  6. media query ie8- 兼容实现总结

    虽然说响应式设计的理想状态是,需对pc/移动各种终端进行响应:但是现实是高分辨率的pc端与手机终端屏幕相差太大,像电商这样有大量图片和文字信息的同时排版要求精准的页面,设计一个同时适应高分辨率pc又适 ...

  7. media type与media query

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  8. media type和media query

    media type media type是CSS2的重要属性,通过它,可以针对不同的设备指定不同的样式.   media type种类:   用法: <link href="styl ...

  9. 在javascript中使用媒体查询media query

    由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: ty ...

  10. css3之 media query 使用(转)

    原文链接:http://www.moke8.com/article-5657-1.html 讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决 ...

随机推荐

  1. 2016最新Java笔试题集锦

    更新时间:2015-08-13         来源:网络         投诉删除 [看准网(Kanzhun.com)]笔试题目频道小编搜集的范文“2016最新Java笔试题集锦”,供大家阅读参考, ...

  2. c++/MFC 封装好的文件内存映射类

    整理日: 2015年2月16日 首先介绍内存映射文件操作------函数的用法以及先后执行顺序 // 第一步:创建文件 HANDLE hFile = CreateFileForMapping(_T(& ...

  3. ping命令找不到

    重装系统后安装JDK了,网络一直不好,我ping了下,结果显示ping不是内部或者外部命令,在谷歌里百度了下,在环境变量的path后加上“;C:\Windows\System32”即可,果然有效哦. ...

  4. 最牛「CSRF防护」，带你进入大虾们的圈子！

    简单理解 CSRF 什么是 CSRF? CSRF,通常称为跨站请求伪造,英文名 Cross-site request forgery 缩写 CSRF,是一种对网站的恶意攻击.一个跨站请求伪造攻击迫使登 ...

  5. iOS图案锁,支持动画、图片、绘图

    最近忙着搭建一个聊天用的框架,过几天应该会整理写出来吧,原理不难,但是实现后会省很多事.好久没写博客,周末心血来潮写了个图案锁,这东西没什么技术含量,网上一堆,这次这个图案锁顺便联系了怎么打包使用.a ...

  6. 【POJ2478】Farey Seque

    题意: 就是求2~n的所有欧拉函数值的和,这里就用到了快速求欧拉函数的方法.(不能暴力求了,不然必定TLE啊) 说说欧拉筛法,感觉十分机智啊~~ 对于上述代码的几个问题: 1.问:为什么i%prime ...

  7. Spring MVC 中的REST支持

    本部分提供了支持 RESTful web 服务的主要 Spring 功能(或注释)的概述. @Controller 使用 @Controller 注释对将成为 MVC 中控制器的类进行注释并处理 HT ...

  8. Android SwitchCompat 自定义颜色及使用

    在Android 5.0 中 Switch 更新了样式 变得 比较好用了 但是在5.0 以下的版本 还是老样子 不实用 因此 就有了 SwitchCompat 来兼容 它是v7 包中的 因此可兼容到 ...

  9. not in改写关联无需考虑重复数据

    SQL> select * from a1; ID NAME ---------- ---------- 1 a 1 a 2 a 3 a SQL> select * from a2; ID ...

  10. Android 之使用LocalBroadcastManager解决BroadcastReceiver安全问题

    在Android系统中,BroadcastReceiver的设计初衷就是从全局考虑的,可以方便应用程序和系统.应用程序之间.应用程序内的通信,所以对单个应用程序而言BroadcastReceiver是 ...