手机，平板设备的暴增，直接促进了移动互联网的大潮来袭，互联网迎来了更多的变革，包括web前端行业也是， 现在变为移动web前端开发了，有多少人迎风倒下，又有多少人经受了这场革命的洗礼。这次教大家如何为自己网站添加响应式，快速抓住移动互联网用户。

流行的有某适配，如果你愿意每年支出高额的费用的话，这里介绍的是一个屌丝如何为网站添加响应式，响应式实现原理非常简单：就是通过css3 media query技术通过浏览器窗口宽度的判断，来调整合适的布局。

响应网页设计已经出来有段时间了,一些开发标准也确立了。但是今天我们要看一些不同的响应式设计技术和创新。假设你在桌面浏览器,去你的浏览器窗口的右下角,然后单击并拖动看网站内容本身的变小和更大的窗口的大小。你会发现网站会有一些奇妙的变化！响应式设计，可以更好减少开发成本以及时间，让更多不同尺寸的设备能够更好的去兼容，这在以前是不可想象的，而且响应式设计。设计风格更加简约与高效，浏览这些类型的网页可以让我们更迅速的了解网站的重点，以及设计者所传达的信息！这篇文章中，我们收集10个非常有代表性的响应式网页设计，点开网页截图，去欣赏吧！希望能发现自己喜欢的设计！

我们不的不承认一个事实，在web设计和开发领域，我们将会无法跟上设备与分辨率革新的步伐。对于多数网站 来说，为每种新设备及分辨率创建其独立的版本根本就是不切实际的；结果就是，我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。不过，或 许会有另外一种方式，可以帮助我们避免这种情况的发生。

响应式网页设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念，随后席卷前端和设计领域，成为了如今网页设计的大趋势。正如同Ethan所说：“响应式网站设计提供了一种全新的选择，这种基于栅格布局和CSS3的流动性网页设计，可以让网页随着屏幕变化而响应。这是一种更为统一，更加全面的设计技巧，一种打破网页固有型态和限制的灵活设计方法。”

这种兼顾多屏幕多场景的灵活设计，这就是响应式设计令人着迷的所在。这一点和编程开发领域所追求的“一次编写，到处运行”有着异曲同工之妙。所以它在短短几年内迅速火起来，然后成为大趋势，可以说是意料之中，水到渠成。响应式设计的网页现在已经很多了，而相关的教程也是数不胜数。国外的设计博客Pixel77搜集了15篇优秀的响应式网页设计的教程，让喜欢钻研的你来学习。