CSS3媒体查询(Media Queries)与移动设备显示尺寸大全

时间  2021-01-11 标签 css3 移动端 媒体查询

最近在做公司官网，需要适配移动端，于是结合自己以前总结的知识，以及在网上找到的相关资料供大家参考。

举个栗子：

 <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以及以上的浏览器开始支持

例子：

<!DOCTYPE html>
<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 

联系我们 沪ICP备13005482号-10