乐趣区

关于html5:CSS3媒体查询Media-Queries与移动设备显示尺寸大全

jiezi

最近在做公司官网，须要适配挪动端，于是联合本人以前总结的常识，以及在网上找到的相干材料供大家参考。

举个栗子：
 <link rel="stylesheet" media="screen and (max-width: 375px)" href="solution_schoolNet.css" />

此 media 属性值的意思是：当页页宽度小于或等于 600px, 就调用 solution_schoolNet.css 样式表来渲染页面。

media 的语句中蕴含的内容：

  • 1、screen：这个不用说大家都晓得，指的是一种媒体类型；
  • 2、and：被称为关键词，与其类似的还有 not,only，稍后会介绍；
  • 3、(max-width:600px)：这个就是媒体个性，说得艰深一点就是媒体条件。

用 css 来示意：

  @media screen and (max-width: 375px) {
    div {width:100%}
  }

罕用媒体查问如下表所示：

上面咱们一起来看看 Media Queries 的具体应用形式：

一、最大宽度 Max Width

  <link rel="stylesheet" media="screen and (max-width:375px)" href="solution_schoolNet.css"/>

下面示意的是：当屏幕小于或等于 375px 时，将采纳 solution_schoolNet.css 款式来渲染 Web 页面。

二、最小宽度 Min Width

 <link rel="stylesheet" media="screen and (min-width:900px)" href="solution_smartCampus.css"/>

三、多个 Media Queries 应用

 <link rel="stylesheet" media="screen and (min-width:414px) and (max-width:736px)" href="solution_wifi.css"/>

Media Query 能够联合多个媒体查问，换句话说，一个 Media Query 能够蕴含 0 到多个表达式，表达式又能够蕴含 0 到多个关键字，以及一种 Media Type。正如下面的其示意的是当屏幕在 414px-736px 之间时（6s plus）采纳 style.css 款式来渲染 web 页面。

四、设施屏幕的输入宽度 Device Width

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

下面的代码指的是 iphone.css 款式实用于最大设施宽度为 480px，比如说 iPhone 上的显示，这里的 max-device-width 所指的是设施的理论分辨率，也就是指可视面积分辨率

五、iPhone4

 <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

下面的款式是专门针对 iPhone4 的挪动设施写的。

六、iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

在大数状况下，挪动设施 iPad 上的 Safari 和在 iPhone 上的是雷同的，只是他们不同之处是 iPad 申明了不同的方向，比如说下面的例子，在纵向（portrait）时采纳 portrait.css 来渲染页面；在横向（landscape）时采纳 landscape.css 来渲染页面。

七、android

// 240px 的宽度
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
// 360px 的宽度
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
// 480px 的宽度
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

咱们能够应用 media query 为 android 手机在不同分辨率提供特定款式，这样就能够解决屏幕分辨率的不同给 android 手机的页面重构问题。

八、not 关键字

 <link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not 关键字是用来排除某种制订的媒体类型，换句话来说就是用于排除合乎表达式的设施。

九、only 关键字

 <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

only 用来定某种特定的媒体类型，能够用来排除不反对媒体查问的浏览器。

其实 only 很多时候是用来对那些不反对 Media Query 但却反对 Media Type 的设施暗藏样式表的。

其次要有：反对媒体个性（Media Queries）的设施，失常调用款式，此时就当 only 不存在；对于不反对媒体个性 (Media Queries) 但又反对媒体类型 (Media Type) 的设施，这样就会不读了款式，因为其先读 only 而不是 screen；另外不反对 Media Qqueries 的浏览器，不管是否反对 only，款式都不会被采纳。

十、其余

在 Media Query 中如果没有明确指定 Media Type，那么其默认为 all，如：

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

其余方面：

-webkit-min-device-pixel-ratio 为 1.0：
  • 1. 所有非 Retina 的 Mac
  • 2. 所有非 Retina 的 iOS 设施
  • 3.Acer Iconia A500
  • 4.Samsung Galaxy Tab 10.1
  • 5.Samsung Galaxy S
-webkit-min-device-pixel-ratio 为 1.3：
    1. Google Nexus 7
-webkit-min-device-pixel-ratio 为 1.5：
  • 1.Google Nexus S
  • 2.Samsung Galaxy S II
  • 3.HTC Desire
  • 4.HTC Desire HD
  • 5.HTC Incredible S
  • 6.HTC Velocity
  • 7.HTC Sensation
-webkit-min-device-pixel-ratio 为 2.0：
  • 1.iPhone 4
  • 2.iPhone 4S
  • 3.iPhone 5
  • 4.iPad (3rd generation)
  • 5.iPad 4
  • 6. 所有 Retina displays 的 MAC
  • 7.Google Galaxy Nexus
  • 8.Google Nexus 4
  • 9.Google Nexus 10
  • 10.Samsung Galaxy S III
  • 11.Samsung Galaxy Note II
  • 12.Sony Xperia S
  • 13.HTC One X

device-aspect-ratio

语法：device-aspect-ratio：<ratio>
取值：<ratio>：指定比率
阐明：定义输出设备的屏幕可见宽度与高度的比率。

  • 如常讲的显示器屏幕比率：4/3, 16/9, 16/10
  • 本个性承受 min 和 max 前缀，因而能够派生出 min-device-aspect-ratio 和 max-device-aspect-ratio 两个媒体个性。

个别例子：

@media screen and (device-aspect-ratio:4/3){…}
@import url(example.css) screen and (min-device-aspect-ratio:4/3);
版本反对：IE9 以及以上的浏览器开始反对

例子：

<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>media features device-aspect-ratio_CSS 参考手册_web 前端开发参考手册系列 </title>
<style>
@media screen and (device-aspect-ratio:16/10){body{color:#f00;}
}
</style>
</head>
<body>
<div class="test"> 当你将输出设备屏幕分辨率为 16:10 时，本行文字显示为红色 </div>
<script>
</script>
</body>
</html>
实例, 判断屏幕横屏：
@media screen and (min-aspect-ratio: 13/8) {}

挪动设施显示尺寸大全

@media screen and (min-width: 212px){/213px 显示屏款式 LG Optimus One/}
@media screen and (min-width: 319px){/320px 显示屏款式 苹果 4 /4S/5C/5S 黑莓 Z30 /}
@media screen and (min-width: 359px){/360px 显示屏款式 索尼 Z1/}
@media screen and (min-width: 383px){/384px 显示屏款式 黑莓 Z10 谷歌 Nexus 6 LG Optimus G/}
@media screen and (min-width: 399px){/399px 显示屏款式 三星 galaxyNote/}
@media screen and (min-width: 414px){/414px 显示屏款式 苹果 6plus/}
@media screen and (min-width: 423px){/424px 显示屏款式 LG 4X /}
@media screen and (min-width: 479px){/480px 显示屏款式 索尼 MT27i Xperia sola/}
@media screen and (min-width: 539px){/640px 显示屏款式 摩托罗拉 Droid3/4/Razr Atrix 4g/}
@media screen and (min-width: 639px){/640px 显示屏款式/}
@media screen and (min-width: 640px){/640px 以上显示屏款式/}

参考地址：http://www.w3cplus.com/content/css3-media-queries

退出移动版