html响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
虽然现在一些web前端框架可以实现响应式布局，但有的web开发人员，尤其是后端或者出入这个行业的人对这些前端框架并不是很了解，今天就来跟大家分享下，不利用框架，仅凭 html+css3 就可以实现响应式布局。
先来看看实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3响应式布局</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style type="text/css">
.box{
width:960px;
height:1000px;
margin:0 auto;
background:#aaa;
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8{width: 25%;border: 1px solid #000;float: left;}
/* 设备最大宽度960px */
@media screen and (max-width: 960px) {
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8{width: 33.33%;border: 1px solid #ccc;float: left;}
}
/* 宽度大于480px且小于768px */
@media screen and (min-width: 480px) and (max-width:768px) {
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8{width: 50%;border: 1px solid #f00;float: left;}
}
/* 设备最大宽度480px */
@media screen and (max-width:480px){
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8{width: 100%;border: 1px solid #00ff00;float: left;}
}
</style>
</head>
<body>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
<div class="box3">
box3
</div>
<div class="box4">
box4
</div>
<div class="box5">
box5
</div>
<div class="box6">
box6
</div>
<div class="box7">
box7
</div>
<div class="box8">
box8
</div>
</body>
</html>在上面的代码中有两处比较特别：
<meta name="viewport" content="width=device-width; initial-scale=1.0">
和 css中的media
<meta name="viewport" content="width=device-width; initial-scale=1.0">是响应式布局头部必须加入属性，其中相关参数的意思如下：
width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别， maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。 user-scalable:是否可对页面进行缩放，no 禁止缩放
media（查询媒介），针对不同的屏幕适应不同的css，也就是上面css代码中的：
@media screen and (max-width: 960px)：当屏幕宽度小于960px时适应它里面的css样式；
@media screen and (min-width: 480px) and (max-width:768px)：当屏幕宽度大于480px ，小于768px 时，适应它里面的css样式；
@media screen and (max-width:480px)：当屏幕宽度小于480px时，适应它里面的css样式；
上面的实例代码的效果图：
图中responsive表示当前页面的尺寸，第一个值为宽度，也就是media 中screen的值，注意这个值的变化以及各个box的位置和边框线颜色
结合效果图可以看出，实际上是通过@media 来指定，当页面处于不同宽度时使用不同的css样式从而实现响应式。
