标签：
讲到响应式布局，相信大家都有一定的了解，响应式布局是现在很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案，今天就和大家探讨一下响应式布局的有关问题。
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的，响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
在上面我们了解了什么是响应式布局，那我们在实际项目中应该怎么去设计呢？在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，现在还要来个不同尺寸设备，我们该怎么淡定下来呢？有需求就会有解决方案，说道响应式布局，就不得不提起CSS3中Media Query（媒体查询），这可是个好东西，易用、强大、快捷……Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷地制造处各种丰富的实用性强的界面。首先，我们可以通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体产讯的大部分特性都接受min和max用于表达“大于或等于”和“小于或等于”。比如：width会有min-width和max-width媒体查询可以被用于CSS中的@media和@import规则上，也可以被用于HTML和XML中。通过这个标签属性我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加地广泛。下面就来说说Media Query可用设备名的一些参数：
设置好这些参数后，我们就需要对我们刚刚设计的Media Queries进行测试，想要在不同设备上测试Media Queries的效果，可以使用一个浏览器工具来检验不同尺寸屏幕下的显示效果，在这里为大家介绍一个不错的在线工具 –Responsivator，它可以模拟iPhone等各种不同设备，并且还可以自定义不同尺寸屏幕的显示效果，只需要输入一个url甚至是本地的一恶搞url（如：http：//123.168.192.1/），就可以看到网站在不同尺寸屏幕下的显示效果。对于在IE浏览器中不支持media query的情况我们可以使用Media Query Javascript来解决，只需要在页面头部引用css3-mediaqueries.js即可。
说了这么多，最后我们来探讨一下响应式布局的一些优缺点吧，首先，响应式布局的优点 就在于面对不同分辨率设备灵活性强，能够快捷解决设备显示适应问题。缺点就是兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长；这只一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。但不得不说响应式是一种新型并且潮流的设计理念，它也在一定程度上推动了互联网行业的发展！
标签：
原文地址：http://www.cnblogs.com/jiangyunfei/p/4558919.html
