首页 > 代码库 > 响应式设计——媒体查询
响应式设计——媒体查询
一、响应式设计
响应式设计的概念是页面的设计应根据用户的行为（如调整浏览器窗口大小）和设备环境（如屏幕大小、屏幕定向）进行相应的调整。它可以由多方面组成，包括弹性网格和布局、弹性图片、媒体查询等。
二、媒体查询
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="http://www.mamicode.com/respond.js"></script><![endif]-->或者
<!--[if lt IE 9]> <script type="text/javascript" src="http://www.mamicode.com/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/
响应式设计——媒体查询