作为一名优秀的web前端人员，不懂响应式布局怎么可以呢？ 今天跟大家分享web前端开发和设计的干货。关于响应式布局的设计方法和响应式前端优化。

我们都知道，目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的显示器。

所以，我们设计的网页不能在按照1024的标准来设计或者是前端重构了。

再加上现在移动互联网的趋势发展这么良好，错过移动互联网这个平台是我们的最大损失。

因为国内众多电商网站还是门户网站，移动端的流量要大于pc端的。

最近在做前端项目的时候，有的客户想把网站做流式布局，或者响应式设计，然后问这两者区别？很纳闷，这两者也比较啊！我们哈先了解两者吧！

流式布局（也称“无限滚动模式”），网页大家看过，没看过我这里举几个例子，花瓣和堆糖他们采用的就是流式布局，看看下图花瓣的一个网页,这么看流式布局更像是一种是设计。

如果想详细了解流失布局，可以看看这个文章 http://toutiao.com/i6197942003482575362/

响应式是什么？则像一种前端技术，不像是设计。屏幕的发展是非常告诉，各种各样尺寸、分辨率的手机，但是它带来一系列的问题，就网页无法不同屏幕上良好的显示，这个时候，作为前端人员通采用响应式。

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

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

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

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

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

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

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