响应式设计——媒体查询
一、响应式设计
响应式设计的概念是页面的设计应根据用户的行为（如调整浏览器窗口大小）和设备环境（如屏幕大小、屏幕定向）进行相应的调整。它可以由多方面组成，包括弹性网格和布局、弹性图片、媒体查询等。
二、媒体查询
2.1媒体查询的概念
在css2中允许使用media来对特定的媒体应用特定的样式，例如针对屏幕或者打印机。可以通过<link>标签的media属性为样式表指定特定的媒体。
<link rel="stylesheet" type="text/css" href="screen-style.css" media="screen" />
但是这种方式只能针对媒体的类型，不能根据媒体的各种功能特性来设定相应的样式，而css3中的媒体查询则可以。
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width和height 等。使用媒体查询，可以在不改变 页面页面内容的情况下，为特定的一些输出设备定制显示效果。
2.2媒体查询的语言
1.在css样式表中使用@media
@media screen and (max-width:800px){
body{
background-color:red;
}
}
①其中screen是媒体类型的一种(屏幕)，其他的媒体类型如下
|
媒体类型 |
媒体类型说明 |
|
all |
所有媒体 |
|
aural |
听觉媒体 |
|
braille |
点字触觉媒体 |
|
handled |
便携媒体，如手机、平板电脑 |
|
|
打印预览图等 |
|
projection |
投影设备 |
|
screen |
显示器、笔记本、移动端等设备 |
|
tty |
如打字机或终端等设备 |
|
tv |
电视机等设备类型 |
|
embossed |
盲文打印机 |
②其中and是关键字，用于连接多个并列条件，其他关键字还有not和only。not是指排除某种设备，除了指定的这种设备之外，其他的都可以。如：
@media not screen{
body{
color:red;
}
}
是指不是显示屏之外的应用此样式。
only是对于不支持Media Queries但是能够正确读取Media Type的设备隐藏样式表。Media Queries是css3对Media Type的一个扩展，所以不支持Media Queries的浏览器，应该仍然要识别Media Type。比如：
@media only screen and (max-width:990px){
body{
color:red;
}
}
对于支持Media Queries的设备，能够正确应用样式，就像only不存在一样；对于不支持Media Queries但是能够正确读取Media Type的设备，由于先读取到only而不是screen，所以会忽略这个样式；不支持media Queries的IE无论是否有only，都忽略样式。下面是Media Queries的支持情况：
| IE6 | 不支持 |
| IE7 | 不支持 |
| IE8 | 不支持 |
| IE9+ | 支持 |
| chrome5 | 支持 |
| Opera10 | 支持 |
| Firefox3.6 | 支持 |
| Safari4 | 支持 |
逗号（,）用来表示并列，即或者。比如：
@media handheld and (max-width:20em),screen and (max-width:30em){
body{
color:red;
}
}
这个表示在宽度小于20em的手持设备，或者宽度小于30em的屏幕中应用此样式。
③其中对于(max-width:800px)就是媒体特性，被置放在一对圆括号里面。媒体特性只接受单个的逻辑表达式作为其值，或者没有值。其中大部分接受max/min的作为前缀。下表是一些媒体特性：
| 媒体特性 | 取值 | 含义 |
支持 max/min |
| width | length | 视口宽度 | 支持 |
| height | length | 视口高度 | 支持 |
| device-width | length | 设备屏幕的宽度 | 支持 |
| device-height | length | 设备屏幕的高度 | 支持 |
| orientation |
portrait| landscape |
检查设备处于横向还是纵向 | 不支持 |
| aspect-ratio | ratio(16/9) | 基于视口宽度和高度的宽高比 | 支持 |
| device-aspect-ratio | ratio(16/9) | 基于设备宽度和高度的宽高比 | 支持 |
| color | integer | 每种颜色的位数 | 支持 |
| color-index | integer | 设备的颜色索引表中的颜色数 | 支持 |
| monochrome | integer | 检查单色帧缓冲区中每像素所使用的位数 | 支持 |
| resolution | resolution(300pdi/118dpcm) | 用来检测屏幕或打印机的分辨率 | 支持 |
| scan |
progressive/ interlace |
电视机的扫描方式 | 不支持 |
| grid | interger | 用来检测输出设备是网格设备还是位图设备 | 不支持 |
2.通过<link>标签的media属性为样式表指定特定的媒体查询
<link rel="stylesheet" media="screen and (orientation:portrait)" href="screen.css" />
2.3媒体查询的兼容
IE8及其以下的浏览器不支持css3 Media Queries，而目前实现media queries兼容的库比较成熟的有respond.js 和 css3-mediaqueries-js，它们各有优缺点，respond.js压缩后只有1K，只实现了Media Queries中最常用的min-width/max-width的兼容；css3-mediaqueries-js基本实现了所有css3规范中的media query特性的兼容，所以导致压缩有16k。
<!--[if lt IE 9]>
<script type="text/javascript" src="respond.js"></script>
<![endif]-->
或者
<!--[if lt IE 9]>
<script type="text/javascript" src="css3-mediaqueries-js.js"></script>
<![endif]-->
2.4媒体查询的小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Media Queries</title>
<style type="text/css">
.box{
width:800px;
height:50px;
line-height: 50px;
margin:40px auto;
border:1px solid #000;
}
@media only screen and (max-width:1300px){
#boxred{
background:red;
}
#boxblue,#boxgreen{
background:none;
}
}
@media only screen and (max-width:1100px){
#boxblue{
background:blue;
}
#boxred,#boxgreen{
background:none;
}
}
@media only screen and (max-width:900px){
#boxgreen{
background:green;
}
#boxred,#boxblue{
background:none;
}
}
</style>
</head>
<body>
<div id="boxred" class="box">当浏览器窗口宽度小于1300px时，这儿变成红色</div>
<div id="boxblue" class="box">当浏览器窗口宽度小于1100px时，这儿变成蓝色</div>
<div id="boxgreen" class="box">当浏览器窗口宽度小于900px时，这儿变成绿色</div>
</body>
</html>
参考文章：http://www.swordair.com/blog/2010/08/431/
