响应式网页设计追求的是根据用户设备的不同、备朝向的不同，以及设备屏幕大小的不同，提供不同的网页设计，以达到都美观的效果。
为了解决手机浏览网页的问题，许多网站都提供了单独的手机版本。比如，在手机浏览器地址栏输入：www.sohuc.om，打开搜狐的主页后，再去看浏览器地址栏，上面的网址实际上是：http://m.sohu.com；同样的，用手机浏览器访问淘宝的主页，实际访问的网址会是：https://m.taobao.com。
这种解决方案下，需要用到设备检测技术，最简单的实现方式就是应用名为deviceJS的JavaScript库（http://www.devicejs.org）。deviceJSDevice.js 是一个可以检测设备、设备方向和操作系统和方向等。deviceJS的简单的示例：
<script type="text/javascript" src="device.min.js"></script>
<script type="text/javascript">
if (device.mobile()) {
window.location = "http://m.sohu.com";
}
</script> |
开发可以使用Chrome浏览器的设备模拟功能，来实现移动设备的测试。打开Chrome浏览器之后，按F12，进入“开发者工具”界面。单击开发者工具栏右上角的“Toggle Device Model”按钮，就会打开设备模式。
这时在浏览器地址栏输入：www.sohu.com回车，就会看到搜狐移动版的页面，而浏览器地址栏会变为：m.sohu.com。
网站的移动版仅仅解决了手机浏览网页的问题，远远不能适应众多上网设备屏幕宽度的差异，于是流式布局技术应运而生。有关流式布局网站的示例，可以访问：http://mediaqueri.es，上面收录了各种风格的使用流式布局设计的网页。
流式布局的本质，就是在不同屏幕宽度下应用不同的CSS样式，以适应设备宽度或者浏览器宽度的改变。要做到这一点，有两个关键的技术，一是HTML标记的宽度和高度要使用相对值，二是对窗口宽度改变做出判断并更换样式表。
先来说第一点，网页中的HTML标记的宽度和高度，必须使用相对值（百分比），而不能是绝对值。下面是一个简单的示例网页：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流式布局 - 相对宽度和高度值</title>
<style type="text/css">
html, body {
height: 100%;
}
div {
width: 90%;
height: 45%;
background: blue;
margin: 0 auto;
}
p.class1 {
width: 60%;
height: 70%;
background: yellow;
padding-left: 10%;
float: left;
}
p.class2 {
width: 20%;
padding: 0 5%;
height: 30%;
background: red;
float: left;
}
</style>
</head>
<body>
<div>
<p class="class1">文字内容</p>
<p class="class2">文字内容</p>
</div>
</body>
</html> |
可以观察浏览器在全屏状态下页面的显示效果，然后调整浏览器窗口宽度后，观察页面的显示效果。
流式布局的另外一项关键的技术就是对窗口宽度改变做出判断并更换样式表。听起来挺难，实际上很容易，就是使用CSS3的媒体查询，看下面的代码片段：
<link rel="stylesheet" href="css/1.css" type="text/css"
media="(min-width:800px)">
<link rel="stylesheet" href="css/2.css" type="text/css"
media="(max-width:799px) and (min-width:600px)">
<link rel="stylesheet" href="css/3.css" type="text/css"
media="(max-width:599px)"> |
这段代码的意思是说：当屏幕宽度大于等于800时，应用样式表1.css；当屏幕宽度小于等于799和大于等于600时，应用样式表2.css；当屏幕宽度小于等于599时应用样式表3.css。 ----------------------------------
把人做到宽容，把技术做到强悍。