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. codevs 1066 引水入城

    传送门 题目描述 Description 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政 区划十分特殊,刚好构成一个N行M列的矩形,如上图所示,其中每个格子都代表一座城 ...

  2. 《深入剖析Tomcat》阅读(二)

    Tomcat是基于Sun公司标准的开源Servlet容器. Servlet是什么? Servlet(Server Applet),全称Java Servlet,未有中文译文.是用Java编写的服务器端 ...

  3. Gogs：可能是比Gitlab更好的选择

    Gitlab是一个很棒的Git托管服务,几乎像GitHub一样强大. 但是,有没有能和Gitlab/Github媲美但操作更简单的项目呢?我认为 Gogs 是很好的选择. 简介 现在,GitHub已经 ...

  4. 用JQUERY的deferred异步按顺序调用后端API

    花了两天啊,想办法. 顺便,DJANGO分页的东东也熟悉了下. 如果不用最新的deferred这个东东,那我们以前传统的链式异步调用代码很难看,且长. 以下这个东东未作优化代码封装. this的参数用 ...

  5. 【HDU2222】Keywords Search（AC自动机）

    Problem Description In the modern time, Search engine came into the life of everybody like Google, B ...

  6. 树莓派学习路程No.1 树莓派系统安装与登录 更换软件源 配置wifi

    在官网下载raspbian系统镜像,用Win32DiskImager写入TF卡 Image File 选择系统镜像,Device 选择TF卡盘符,Write即可.这样系统就写好了.把内存卡插进树莓派里 ...

  7. Unicode(UTF-8, UTF-16)令人混淆的概念

    为啥需要Unicode 我们知道计算机其实挺笨的,它只认识0101这样的字符串,当然了我们看这样的01串时肯定会比较头晕的,所以很多时候为了描述简单都用十进制,十六进制,八进制表示.实际上都是等价的, ...

  8. 监控Activity在前后台状态的切换

    public class BaseActivity extends Activity{ @Overrideprotected void onStop() { boolean isOnForegroun ...

  9. [LeetCode#274]H-Index

    Problem: Given an array of citations (each citation is a non-negative integer) of a researcher, writ ...

  10. Delphi Web Service和ISAPI的区别与联系 转

    Web Service和ISAPI的区别与联系   1.Web Service 是一种新的web应用程序分支,他们是自包含.自描述.模块化的应用,可以发布.定位.通过web调用.Web Service ...