简单介绍响应式设计的基本概念

什么是响应式设计

用一句话描述就是:你设计的网站在各个尺寸的终端上（PC，mobile，tablet等）被用户访问的时候，页面的布局，包括长宽以及图片的排版，可以自适应设备的系统，屏幕尺寸以及屏幕方向。

响应式设计的历史

2010年5月，伊桑.马科特（Ethan Marcotte）在“A List Apart”写了一篇开创性的文章（题为Responsive Web Design ），他利用三种已有的工具：流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）创建了一个在不同分辨率屏幕下都能漂亮地显示的网站。 Ethan Marcotte力劝设计师们要去利用那些Web独有的特性去进行设计： “我们可以将不同联网设备上众多的体验，当作是同一网站体验的不同侧面来对待，而不要为每种设备进行单独剪裁而使得设计彼此断开，这才是我们前进的方向。虽然我们已经能够设计出最佳的视觉体验，但还要把基于标准的技术也嵌入到我们的设计中去，这样才能使得我们的设计不仅灵活，而且还能适应渲染它们的各种媒介。” Ethan Marcotte证明了一种在多种设备上都能提供卓越体验的方法的存在，而且这一方法不会忽视不同设备的差异，也不会强调设计师的控制权，而是选择了顺其自然并拥抱Web的灵活性。

设计原则

1. 移动优先：在设计初期就要考虑页面如何在多终端显示
   考虑IE8等不支持css3的兼容性，使用javascript来实现统一的显示效果。
2. 渐进增强：充分发挥硬件设备的最大功能

实现响应式布局的一些方法

• ccs3-Media Query 最简单的方式
• 借助原生的javascript 成本高，不推荐使用
• 第三方开源框架 可以很好的支持浏览器响应式布局的设计，例如有名的bootstrap