响应式布局的原理

第一步: Meta标签

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

( IE8或者更早的浏览器并不支持Media Query。你可以使用
media-queries.js或者respond.js来为IE添加Media Query支持。  )

( 

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

 3. <![endif]--> 

)

第二步：HTML结构 
        在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素。

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