响应式这个概念目前很火，是目前智能手机、平板普遍后的一个概念。由于智能手机，平板都对 html 支持相当良好，老套的 wml，wap 等编码被淘汰是必然之势，HTML终迎统一！
随之问题来了，手机即使支持 HTML 但屏幕太小，初期的手机一般就 320480，480800 等，发展到现在虽然都1000以上了，但屏幕才 4-5 寸，只能说 DPI 很高，内容还是放不了多少。
响应式布局就是开发一个页面，用户不管在什么设置上打开都能看到满意的效果。不管是手机还是电脑什么的，都能适配。
智能手机一般都支持 HTML5 了，响应式布局是利用 CSS3 的媒体查询特性，先看看 CSS3 对媒体查询的特性、就知道大体原理了：
| 媒体特性 | 取值 | 必须 | 说明 |
|---|---|---|---|
| width | length | yes | 定义输出设备中的页面可见区域宽度 |
| height | length | yes | 定义输出设备中的页面可见区域高度 |
| device-width | length | yes | 定义输出设备的屏幕可见宽度 |
| device-height | length | yes | 定义输出设备的屏幕可见高度 |
| orientation | portrait/landscape | no | 定义’height’是否大于或等于’width’。值portrait代表是，landscape代表否 |
| aspect-ratio | ratio | yes | 定义’width’与’height’的比率 |
| device-aspect-ratio | ratio | yes | 定义’device-width’与’device-height’的比率。如常见的显示器比率：4/3, 16/9, 16/10 |
| color | integer | yes | 定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0 |
| color-index | integer | yes | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |
| monochrome | integer | yes | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| resolution | resolution | yes | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | progressive/interlace | no | 定义电视类设备的扫描工序 |
再来看看目前热火朝天的bootcss里面的代码
@media (min-width: 800px) {
/**csscode*/
}
@media (min-width: 800px) and (max-width: 980px) {
/**csscode*/
}
虽然事先没去学习过这种语法，但也应该很好懂吧，不多解释，再者，翻遍bootcss的代码，看到所有媒体查询的属性都只用到了width,height,device-width,device-height。简简单单的4个属性就搞定了响应式，所以其它不常用的也没太大必要去了解，上面4个属性又是最简单的4个属性，所以呢，一个响应式demo就这么简单的写出来了。代码贴在下面，怎么发挥就靠个人了。
<html>
<head>
<meta charset="utf-8" />
<title>测试响应式布局</title>
<style type="text/css">
article{
font-family: 华文黑体,微软雅黑;
}
@media (max-width: 799px) {
article {
font-size: 24px;
}
article:before{
content:'你的宽度800不到:字体只能显示24PX：';
}
}
@media (min-width: 800px) and (max-width: 980px) {
article {
font-size: 30px;
}
article:before{
content:'800-980宽度:字体只能显示30PX：';
}
}
@media (min-width: 980px) {
article {
font-size: 36px;
}
article:before{
content:'980px宽度以上:字体只能显示36PX：';
}
}
@media only screen and (max-device-width:480px){
article:after{
content:' 设备宽度480都不到哦';
}
}
@media only screen and (min-device-width:480px) and (max-device-width:800px){
article:after{
content:' 设备宽度有480-800';
}
}
@media only screen and (min-device-width:800px){
article:after{
content:' 设备宽度800+了';
}
}
@media only screen and (min-resolution: 300dpi),only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min--moz-device-pixel-ratio: 1.5){
article:after{
content:'300dpi，视网膜屏幕yeah，好屏幕!';
}
}
</style>
</head>
<body>
<article>
这是一段文字，让IE678去死吧
</article>
</body>
</html>