为了使网页能够适应任何移动设备、桌面计算机的浏览器，提出了响应式网页设计。
CSS3中的Media Query(媒介查询)，是制作响应式布局的一个利器，使用这个工具来快捷的制造出各种丰富的实用性强的界面。通过不同媒介类型和条件来定义样式表规则，让CSS可以更加精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达“大于或等于“和”小于或等于“。通过这个标签属性，可以方便的在不同的设备下实现丰富的界面。
语法规则：
@media 设备名 only (选取条件) not （选取条件）and (设备选取条件)，设备二{}
字符间用空格隔开，选取条件包含在小括号里，css规则包含在大括号里，多种设备用逗号隔开。
为多种类型的屏幕设置样式：
<style type="text/css">
@media screen and (min-480px){
//css rules
},
@media screen and(min-600px){
//css rules
},
@media screen and(min-768px){
//css rules
},
@medis screen and {min-910px){
//css rules
}
</style>
可以用到的设备有：
可接受的参数：
在设置样式表的时候，为了更好的显示效果，还需要格式化一些css属性的初始值：
/*禁用iphone中safari的字号自动调整*/
html{
-webkit-text-size-adjust:none;
}
/*设置HTML5元素为块*/
article,aside,details,figcaption,figure,footer,hgroup,menu,nav,section{
display:block;
}
/*设置图片视频等自适应调整*/
img{
max-100%;
height:auto;
auto9;
}//图片最大宽度为100%，如果图片超过了，就缩小，图片小了，就原尺寸输出。
.video embed,.video object,.video iframe{
100%;
height:auto;
}
页面的头部需要加上：
<meta name="viewport" content="width=device-width;initial-scale=1.0"
这段标签是告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。user-scalable=no 属性可以解决ipad切换横屏之后触摸才能回到具体尺寸的问题。
如果是大型网站，需要为各类型的移动终端独立编写css样式文件，此时使用以下方式：
<link rel="stylesheet" type="text/css" media="only screen and (max-device-480px)" href="small_screen.css">
由于IE浏览器不支持media Queries，需要引用一个media query javascript解决：
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
关于静态布局、自适应布局、流式布局和响应式布局的区别：
静态布局即传统的web设计，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分，对于移动设备，单独设计一个布局，使用不同的域名如wap或m。即固定页面。
自适应布局分别为不同的屏幕分辨率定义布局，布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。位置变化，大小不变。
流式布局是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。大小变化位置不变。
响应式布局能为不同的屏幕分辨率定义布局，在 每个布局中应用流式分布的理念，即页面元素宽度随着窗口调整而自动适配。元素大小和位置均发生改变。