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. Apache与Nginx的比较

    1.Apache与Nginx的优缺点比较 nginx相对于apache的优点: 轻量级 : 同样起web 服务,比apache 占用更少的内存及资源 抗并发 : nginx 处理请求是异步非阻塞的,而 ...

  2. JSP中两种模式的总结

    运用JSP/Servlet实现的Web动态交互,主要采用: 模式一:JSP+JavaBean 链接:http://wxmimperio.coding.io/?p=155 模式二;JSP+Servlet ...

  3. [BZOJ 1025] [SCOI2009] 游戏 【DP】

    题目链接:BZOJ - 1025 题目分析 显然的是,题目所要求的是所有置换的每个循环节长度最小公倍数的可能的种类数. 一个置换,可以看成是一个有向图,每个点的出度和入度都是1,这样整个图就是由若干个 ...

  4. 流形学习（manifold learning）的一些综述

    流形学习(manifold learning)的一些综述 讨论与进展 issue 26 https://github.com/memect/hao/issues/26 Introduction htt ...

  5. 【Tools】Apache Maven 入门篇 ( 上 )

    作者:George Ma 写这个 maven 的入门篇是因为之前在一个开发者会的动手实验中发现挺多人对于 maven 不是那么了解,所以就有了这个想法.这个入门篇分上下两篇.本文着重动手,用 mave ...

  6. C语言常用数学函数及其用法

    转自:http://blog.sina.com.cn/s/blog_8b5a0d0001011779.html 三角函数:(所有参数必须为弧度)  1.acos 函数申明:acos  (double ...

  7. 子窗体显示在任务栏，且子窗体中又有弹窗（CreateParams修改三个风格参数）

    子窗体显示在任务栏时, procedure Tfrm_SendSmartMsg.CreateParams(var Params: TCreateParams);begin  inherited;  P ...

  8. Android开源项目发现--- 传感器篇（持续更新）

    Great Android Sensing Toolkit Android感应器工具包,包含示例及使用过程中可能需要的算法 项目地址:https://github.com/gast-lib/gast- ...

  9. 【转】vc中使用SendMessage正确发送自定义消息的方法--不错

    原文网址:http://zhoumf1214.blog.163.com/blog/static/5241940200910265532959/ 最近在用VC2008做开发,后来由于要用到消息的发送,而 ...

  10. Android开源项目整理：个性化空间View篇(看遍论坛千万篇，不看此篇也枉然)

    个性化View控件虽然你在多处可以找到 但是这个整理的不可以不看欧: 主要介绍不错的个性化View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridVi ...