html5响应式布局，兼容ie7.8

1：Meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

2，IE8或者更早的浏览器并不支持Media Query。在此引入respond.js

<!--[if lt IE 9]>      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  <![endif]--> 

 <script src="respond.src.js"></script>

3，html结构

4，媒介查询-Media Queries
        CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
        当视图宽度为小于等于1440像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

/************************************************************************************MEDIA QUERIES*************************************************************************************//* for 1440px or less */@media screen and (max-width: 1440px) {#pagewrap {width: 94%;}#content,#content1,#content2,#content3 {width: 23%;}h2 {font-size: 28px;color:#000;}}

对于小于等于700像素的情况，容器会为类似“瀑布流”模式

/* for 700px or less */@media screen and (max-width: 700px) {#content,#content1,#content2,#content3{width: auto;float: none;}}

如图：

你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。

下面分别为几种分辨率下Media Queries的效果：

1440

1366

1280

1152

1024

<700(移动设备示例)

核心技术参考自http://blog.csdn.net/hfahe/article/details/7082718/