CSS3的媒体查询（MediaQueries）与移动设备显⽰尺⼨⼤全媒体查询介绍
我今天就总结⼀下响应式设计的核⼼C SS技术Me d ia(媒体查询器)的⽤法。
先看⼀个简单的例⼦：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
上⾯的media语句表⽰的是：当页页宽度⼩于或等于600px，调⽤small.css样式表来渲染你的Web页⾯。⾸先来看media的语句中包含的内容：
1、screen：这个不⽤说⼤家都知道，指的是⼀种媒体类型；
2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；
3、（max-width:600px）：这个就是媒体特性，说得通俗⼀点就是媒体条件。
前⾯这个简单的实例引出两个概念性的东西，⼀个就是媒体类型（Media Type）和 媒体特性（Media Query），⾸先⼀起来理解⼀下这两个概念：
媒体类型(Media Type)在css2中是⼀个常见的属性，也是⼀个⾮常有⽤的属性，可以通过媒体类型对不
同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页⾯打印或打邱预览模式），其实在媒体类型不⽌这三种，w3c总共列出了10种媒体类型。
媒体特性Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，为了更能理解Media Query，我们在次回到前⾯的实例上：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
转换成css中的写法为：
@media screen and (max-width: 600px) {
选择器 {
属性：属性值；
}
}
其实就是把small.css⽂件中的样式放在了@media srceen and (max-width;600px){...}的⼤括号之中。
在语句上⾯的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：
1、Media query只接受单个的逻辑表达式作为其值，或者没有值；
2、css属性⽤于声明如何表现页页的信息；⽽Media Query是⼀个⽤于判断输出设备是否满⾜某种条件的表达式；
3、Media Query其中的⼤部分接受min/max前缀，⽤来表⽰其逻辑关系，表⽰应⽤于⼤于等于或者⼩于等于某个值的情况；
4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种.
常⽤的Media Query如下表所⽰：
兼容的浏览器：
Me d ia Que r ie s具体使⽤
下⾯我们⼀起来看看Media Queries的具体使⽤⽅式
⼀、最⼤宽度Max Width
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css"/>
上⾯表⽰的是：当屏幕⼩于或等于600px时，将采⽤small.css样式来渲染Web页⾯。
⼆、最⼩宽度Min Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"/>
三、多个Media Queries使⽤
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css"/>
Media Query可以结合多个媒体查询，换句话说，⼀个Media Query可以包含0到多个表达式，表达式⼜可以包含0到多个关键字，以及⼀种Media Type。正如上⾯的其表⽰的是当屏幕在600px-900px之间时采⽤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"/>
另外还有使⽤逗号（，）被⽤来表⽰并列或者表⽰或，如下
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)"/>
上⾯代码中style.css样式被⽤在宽度⼩于或等于480px的⼿持设备上，或者被⽤于屏幕宽度⼤于或等于960px的设备上。
下⾯具体讲解过程：
准备⼯作1：设置Meta标签
⾸先我们在使⽤Media的时候需要先设置下⾯这段代码，来兼容移动设备的展⽰效果：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的⼏个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放⽐例（默认设置为1.0）黑道小说排行榜完本
minimum-scale：允许⽤户缩放到的最⼩⽐例（默认设置为1.0）
maximum-scale：允许⽤户缩放到的最⼤⽐例（默认设置为1.0）
user-scalable：⽤户是否可以⼿动缩放（默认设置为no，因为我们不希望⽤户放⼤缩⼩页⾯）
准备⼯作2：加载兼容⽂件JS
因为IE8既不⽀持HTML5也不⽀持CSS3 Media，所以我们需要加载两个JS⽂件，来保证我们的代码实现兼容效果：
<!--[if lt IE 9]>
<script src="oss.maxcdn/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="oss.maxcdn/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
准备⼯作3：设置IE渲染⽅式默认为最⾼(这部分可以选择添加也可以不添加)
现在有很多⼈的IE浏览器都升级到IE9以上了，所以这个时候就有⼜很多诡异的事情发⽣了，例如现在是IE9的浏览器，但是浏览器的⽂档模式却是IE8:
为了防⽌这种情况，我们需要下⾯这段代码来让IE的⽂档模式永远都是最新的：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
不过⼜有⼀个更给⼒的写法：
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
怎么这段代码后⾯加了⼀个chrome=1，这个，如果有的⽤户电脑⾥⾯装了这个chrome的插件，就可以让电脑⾥⾯的IE不管是哪个版本的都可以使⽤Webkit 引擎及V8引擎进⾏排版及运算，⽆⽐给⼒，不过如果⽤户没装这个插件，那这段代码就会让IE以最⾼的⽂档模式展现效果。这段代码我还是建议你们⽤上，不过不⽤也是可以的。
进⼊CSS3 Media
⼀般写法：
@media screen and (max-width: 960px){
body{
background: #000;
}
}
应该有⼈会发现上⾯这段代码⾥⾯有个screen，他的意思是在告知设备在打印页⾯时使⽤，在屏幕上显⽰时⽤⽆衬线字体。但是⽬前我发现很多⽹站都会直接省略screen，因为你的⽹站可能不需要考虑⽤户去打印时，你可以直接这样写：
@media (max-width: 960px){
body{
background: #000;
}
}
其中css2的媒体查询：
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
我们想知道移动设备是不是纵向放置的显⽰屏，可以这样写：
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
我们把第⼀段的代码也⽤CSS2来实现，让它⼀样可以让页⾯宽度⼩于960的执⾏指定的样式⽂件：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">
但是上⾯这个⽅法，最⼤的弊端是他会增加页⾯http的请求次数，增加了页⾯负担，我们⽤CSS3把样式都写在⼀个⽂件⾥⾯才是最佳的⽅法。下⾯的写法是实现尺⼨等于480px：
今年中秋国庆祝福语@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
//⾃⼰添加的样式
}
其中对于-webkit-min-device-pixel-ratio作如下解释：
-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
媒体查询之d e v ice-as p e ct-r atio
说明：本⽂档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
语法：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以上显⽰屏样式*/}
PS：⼀般⽤苹果的屏幕适配就不会有问题
8plus 宽度：375
6plus 宽度：414
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论