响应式布局

什么响应式布局？响应式布局（响应式界面），能够适应不同的设备的一种页面布局，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本，描述响应式布局有名的一句话“content is like water”翻译过来就是“如果将屏幕看成一个容器，那么内容就像水”

 

为什么有响应式布局？以前一个网站不能够兼容多个终端，只能兼容一种终端的时候，为了给不同终端的用户提供更加舒适的界面和更好的用户体验，做一个网站要写好几套样式，即浪费时间又浪费精力，并且可能出现大量的重复代码，这是违背了程序员的原则，为了解决这个问题Ethan Marcotte在2010年5月份提出的一个概念响应式布局。

响应式布局的特点

1.面对不同分辨率设备灵活性强

2.能够快捷解决多设备显示适应问题

 

响应式布局的缺点

1.会出现隐藏无用的元素

2.加载时间加长

        

响应式布局的实现

实现响应式布局的时候用到css3中的Media Query（媒介查询），媒介查询是通过不同的媒介类型和条件定义样式表规则，媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。