1.什么是响应式：

响应式设计理念是基于流动布局、弹性图片、弹性表格、弹性视频和媒体查询等技术的组合。使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围，这两者组合到一起构成了响应式设计的核心。
2.什么是视口：
    视口在响应式设计中是一个非常重要的概念。视口的概念针对移动端浏览器，分为两种视口，一种是可见视口即设备大小，另一种是视窗视口即网页宽度。

什么是响应式设计？为什么要做响应式设计？响应式设计的基本原理是什么？
页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、css media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：

$(window).resize(function () {

  screenRespond();

});screenRespond();function screenRespond(){var screenWidth = $(window).width();if(screenWidth <= 1800){

  $("body").attr("class", "w1800");

}if(screenWidth <= 1400){

  $("body").attr("class", "w1400");

}if(screenWidth > 1800){

  $("body").attr("class", "");

}

}

一天到晚的听人吹什么响应式设计，具体问又支支吾吾，打不出个具体所以然来，今天我就大概讲一下响应式设计，顺便讲一下其它的几种设计的区别。 

现在前端存在着这么几个布局： 

1.静态布局（Static Layout） 

即传统Web设计，对于PC设计一个Layout，页面上的控件都是固定大小，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 

对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。 

2.流式布局（Liquid Layout） 

流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。 

白话：页面元素用百分比设定，随着不同的分辨率或者不同浏览器显示不同 

3.自适应布局（Adaptive Layout） 

自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。 

你可以把自适应布局看作是静态布局的一个系列。 

通常是用到css hack;

Hack是基于开源的程序的基础，对其代码进行增加、删除或者修改、优化，使之在功能上符合新的需求。

css hack:我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

4.响应式布局（Responsive Layout） 

分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 

可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

之前想过：最开始其实想错了，自适应布局就是通过百分比布局，而响应式则是布局也大变样了；其实这是流式布局和响应式布局的区别；自适应并不是通过百分比来使各种浏览器适应的；而也是通过各种不同的css来布局的；

而且布局不一定局限到css上，因为不同浏览器所解释的不同，js有时候也得用不同的代码，这也叫自适应。 

主要理解清楚自适应布局和响应式布局的区别

从图中可以看出，响应式设计是一对多的方式，自适应设计是一对一的方式。换句话说，响应式设计用一套代码写出的网页适应多个设备，而自适应设计用一套代码写出的网页自适应一个设备，不同的设备需要单独定义。

自适应只是响应式的一个子集 

自适应：不改变布局 

响应式：布局随着页面大小不同而改变 

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验 

因为响应式布局可以改变布局，所以一行显示几个可以根据屏幕的大小单独确定，这就增强了用户体验；

那制作网站的时候“什么样的网站/项目适合使用自适应布局（固定断点）？什么样的网站适合响应式布局？（流体网格）” 

      理论上来说，响应式布局在任何情况下都比自适应布局好一些，但在某些情况下自适应布局更切实际。 

      自适应布局可以让你的设计更加可控，因为你只需要考虑了了几种状态就万事大吉了。但在响应式布局中你可能需要面对非常多状态——是的，大部分状态之间的区别很小，但它们又的确是不同的——这样一来就很难确切搞清你的设计会是什么样。同时这也带来了测试上的难题，你很难有绝对的把握预测到它会怎样。换个角度说，这也是响应式布局的魅力所在。通过允许表面上的不确定因素存在，你可以获得更高层次上的确定。虽然你无法在精确到像素级别准确预知你的设计如何在943px×684px视觉区域汇中展示，但你能确定的是它们一定能展示的很好——不管是表层特征还是布局结构都有条不紊。 

      自适应布局有它自己的优势，因为它们实施起来代价更低，测试更容易，这往往让他们成为更切实际的解决方案。自适应布局可以看做响应式布局的“穷兄弟”，在资源有限的情况下就可以让它出马。特别是改进现有网站的时候尤其奏效，因为全部重写代码在这时并不可行。这种案例中，采用自适应布局是一个不错的出发点。 

其实无论是哪种设计理念都是各有优缺的，还是要从个人实际去求出发去选择！ 

这次首先弄清楚了响应式的具体概念，以后对响应式也不再那么迷茫，以后有时间通过以下网址的参考讲一下响应式的具体实现；

响应式实现参考： 
http://blog.csdn.net/zxl1033394132/article/details/50574382 
https://www.zhihu.com/question/20976405 
http://baike.baidu.com/link?url=3IXk1ItK6G0TEwxiuw3rF6Fgl5JKfqDN-l4afjRXsBuWl8IqlnYoketNXIbFIZwRa2LLPQBKThqicD8V8rcYoOBulcPHD5n-iJYtKJRTnWBC8o9Y4AXQYM0zNXUTQW5Xmhq-wWAfrLh7eAbedKO0q_ 
http://caibaojian.com/356.html 
http://blog.csdn.net/kalision/article/details/22305393

前端设计 响应式设计
“Responsive Design” as a buzzword has reached peak popularity: we now have books and entire seminars devoted to the subject. Before starting into the topic, it would be wise to define it.
 作为流行语的“响应式设计”已达到顶峰：我们现在有专门针对该主题的书籍和整个研讨会。 在开始本主题之前，最好先对其进行定义。 
Responsive design is perhaps contrasted with what came before it: in the past, sites designed for mobile devices were entirely separate works, often maintained under a .mobi domain name. Due to bandwidth issues and the limitations of devices then in service, mobile sites were often pale shadows of their fully-fledged desktop cousins.
 响应式设计可能与之前的设计形成对比：过去，为移动设备设计的站点是完全独立的作品，通常以.mobi域名维护。 由于带宽问题和当时投入使用的设备的局限性，移动站点通常是其成熟的桌面堂兄的淡淡阴影。 
As the capability, speed and resolution of mobile devices improved, it became obvious that the browsers that came with them were constrained only by size, interaction mode, and bandwidth; otherwise, they were just as capable as their desktop brethren. Smartphone users began to expect the same experience of a site on their mobile device as when they were at home on their desktop computer, if not an enhanced experience of the site on their smartphones.
 随着移动设备的功能，速度和分辨率的提高，很明显，随其附带的浏览器仅受大小，交互模式和带宽的限制； 否则，他们和台式机弟兄一样有能力。 智能手机用户开始期望在移动设备上获得与在家中使用台式计算机相同的体验，即使不是增强了智能手机上的体验。 
In the bad old days of web development, the major sin was “this site only works in x browser”;. Now, the sin is “this site is only usable at y resolution”;.
 在Web开发的糟糕年代，主要的缺点是“该站点仅在x浏览器中有效”； 现在，罪过是“该站点仅在y分辨率下可用”； 
Responsive design attempts to eliminate the distinction between screens, devices, and resolution: every visitor sees just one site, in different forms that are optimized for their device and experience. This means developers create just one codebase for a site, eliminating duplication and redundancy… and potentially, weeks of extra work.
 响应式设计试图消除屏幕，设备和分辨率之间的区别：每个访客只能看到一个站点，其形式针对其设备和体验进行了优化。 这意味着开发人员只为一个站点创建一个代码库，从而消除了重复和冗余……并可能需要数周的额外工作。 
Developing a responsive design can be tricky, as it is akin to designing three or more pages in one: for every page of your site, you have to make a series of decisions, based on window size, bandwidth, and interaction mode:
 开发响应式设计可能很棘手，就像在一个页面中设计三个或更多页面一样：对于站点的每个页面，您都必须根据窗口大小，带宽和交互方式做出一系列决定： 
What page features are needed for this configuration? How should they be changed? (for example, a long list of options changing into a drop-down menu as the screen narrows, or using geolocation services on a mobile device to suggest a nearby retail location rather than asking for a postal code).
 此配置需要哪些页面功能？ 应该如何更改它们？ (例如，随着屏幕变窄，一长串选项会变为下拉菜单，或者使用移动设备上的地理位置服务来建议附近的零售地点，而不是要求邮政编码)。 
Should the design alter in respect to bandwidth constraints?
 设计是否应就带宽限制进行更改？ 
Should font and image sizes change for smaller screens?
 较小的屏幕是否应该更改字体和图像大小？ 
How should the remaining elements of the page be displayed as a result of these changes?
 这些更改如何显示页面的其余元素？ 
Given all these decisions, what is the optimum layout for the page?
 根据所有这些决定，页面的最佳布局是什么？ 
Responsive design is not one suite of technologies or techniques. Media queries play a part, but have limitations as they are currently written. In a fully responsive site @media queries are usually joined by JavaScript, HTML5 and server-side languages such as PHP to create a complete solution.
 响应式设计不是一套技术。 媒体查询起着一定的作用，但由于其当前的编写方式而受到限制。 在完全响应的网站中，@ @media查询通常与JavaScript ，HTML5和服务器端语言(例如PHP)结合在一起，以创建完整的解决方案。 
Unless you attend one of my classes, I can"t tell you how a web page should be designed for all devices, orientations and uses. What I will provide here is a series of technical approaches for making any site responsive; it will be up to you to determine how to use the techniques in your endeavours.
 除非您参加我的一个课程，否则我不会告诉您应该如何针对所有设备，方向和用途设计网页。我将在此处提供的一系列技术方法可以使任何站点都具有响应能力；它将不断发展确定如何在工作中使用这些技术。 
 更多资源 (Further Resources)
Define Responsive and Liquidapsive are simple but very effective single-page sites that conceptualize and visualize responsive, adaptive, fluid and static designs, which may be particularly helpful for clients who ask “can’t we just make the page smaller?”
 Define Responsive和Liquidapsive是简单但非常有效的单页网站，可以概念化和可视化响应式，自适应，流畅和静态的设计，这对于那些要求“我们不能缩小页面尺寸？”的客户特别有用。 
翻译自: https://thenewcode.com/515/Introduction-to-Responsive-Design
前端设计 响应式设计