在平时的网页设计中，我们需要考虑网页在各种设备上的适应情况，面对这种适应情况而作出的设计，就是响应式设计。响应式设计的目的是为了让网页在各种设备上都能很好的体现。那么如何才能做到呢？
第一：
我们需要用到css中的一个语法：
@media
@media的语法结构如下：
@media screen and (max-width:600px){
body{
background-color:black
}};//意思是当屏幕的宽度小于600像素的时候，把背景改成为黑色;width指的是当前设备的宽度。
对于这个语句中的and ，也可以根据情况而使用，not 和only;max-width同时也可以min-width;
@media screen and (max-width:600px) and (min-width:300px){
body{
background-color:black;
}}//同时支持链式结构，上述语句表示当网页的宽度在300-600像素之间的时候，把背景改成黑色。
了解了css的这一语法之后，我们可以适应很多屏幕来做开发。但是需要注意的是，在写css的时候，要注意选择器的优先级。
第二：
响应式设计中我们难免要做到页面的div块随着页面的大小而变化。如何解决这一问题呢？
1：我们需要在页面中写一个基准div块，比如：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1,maximum-scale=1″ />
<style type='text/css'>
#base{
position:relative;
max-width:1355px;
margin:0 auto;/*居中*/
padding:0;
}
</style>
</head>
<body>
<div id='base'>
</div>
</body>
</html>
当我们把基准的这个#base确定之后，我们接下来写的页面的div块元素要换成百分比的形式，这样就能保证在屏幕变化时，网页不失真。 同时要把字体设置成以em为单位的。
第三：
在手机等屏幕上面显示良好的网页，需要
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
在网页的meta标签中写上这一句话.viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。
<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”> </script> <![endif]–>//if和endif是判断是不是ie浏览器的语句，如果想要知道更多，你可以搜索<!–[if lt IE 9]>
第四：图片
img { max-width: 100%;}
img { width: 100%; }//老版浏览器
img { -ms-interpolation-mode: bicubic; }//windows平台ie浏览器的特定命令;
其实也就是需要把图片设置成为相对的大小。
上述语句是对于老式的浏览器而言的。在适配老师的浏览器的时候需要用到css3-mediaqueries.js。
那么综上所述，响应式网页的设计主要用到：@media,网页内容的相对宽度、高度而不是绝对宽度高度，字体的相对大小，图片的自适应。
最后，其实一个响应式的网页有很多多余的代码（对于手机，平板等而言），对于大型网页有可能会有加载缓慢的问题，所以并不是所有的网页都需要这么来进行设计。有的公司对于手机就有另外一个版本的手机网页。但是同一个网页过多的版本，维护起来就需要开发人员很大的精力。所以任何事情并不是总有完美的解决方案，只有最适应的才是最完美的。