响应式布局

快下班了，想着复习一下响应式布局。

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个 概念 是为解决移动互联网浏览而诞生的。这种方法写出来的页面虽然能交融多个终端，但也有缺点。比如： 兼容各种设备工作量大，效率低 代码累赘，会出现隐藏无用的元素，加载时间加长等。这方面做的比较好的插件有bootstrap。感兴趣的朋友可以去看看。

下面我就具体说一下如何写一个简单的响应式布局。

1、首先，你需要在中加一个 name="viewport" content="width=device-width, initial-scale=1.0">标签

2、在样式表中内嵌@media用于媒体查询。如：@media screen and (max-width:1200px ) {}表示当页面宽度小于1200px时渲染的样式。当然，可以添加多个分界线 如@media only screen and (min-width: 800px) and (max-width: 1000px) {}

3、在刚才的{}写加入你要显示的样式，这样，当页面尺寸达到你设定的值时，就会执行相应的样式。

4、要说明一点，{}中写的css要用百分比来定义宽高。

5如果其中涉及到图片的切换，可以结合css3新属性content 和attr 来改变图片的路径。如：

html：

css：

@media (min-device-width:600px)

{ img[data-src-600px] 

{ content: attr(data-src-600px, url); } 

} 

@media (min-device-width:800px)

 { img[data-src-800px] 

{ content: attr(data-src-800px, url); } 

}