javascript - 大家怎么理解自适应与响应式

Question

最近做了一个响应的网站，但是lead只给了一套1080px的PSD；说是要响应式，可以用Bootstrap或者Foundation；一番折腾之后，我决定自己写一套响应式的样式。

我发现一些问题：

1，响应式网站最起码需要三套设计以分别适应mobile，ipad，desktop（我现在只有一套1080px的PSD）。

2，响应式与自适应是有很大区别的；

3，如何合理化的规划响应式布局，请问大家是怎么做的

demo：http://chenbin92.github.io/ib5k_responsive/ib5k_static/Home%20-%20Company%20Name.html
参考书籍：http://pan.baidu.com/share/link?shareid=2018064606&uk=422655618&third=15

Answer 1

我想了3秒钟，没想出来自适应和响应式有啥区别，于是开始搜素。

经过几分钟的搜索，我认为自适应和响应式应该都是同一个东西：responsive web design(rwd)。我没找到哪个地方说自适应不是RWD或者响应式不是RWD的。实际上在维基百科，这两个词直接是混用的

一般来说会和RWD混淆的是所谓的fluid grid，也就是用百分比进行页面布局。后者是前者的常用手段之一。

我觉得一般来说如果要做responsive，大概是

1. 先搞定中间尺寸，也就是pad~small desktop这块
2. 然后搞定大尺寸，往往是水平方向延伸一些元素出去
3. 最后搞小尺寸手机，这块一般比较复杂，经常需要JS辅助。比如把侧边栏改造成菜单按钮的弹出菜单，比如导航的重新设计等等。

---

感谢 @nightire 的提醒，有个叫adaptive web design的概念，我搜了一下，主要强调除了RWD的手段之外，同时也应该通过服务器端的判断来对不同类型终端输出不同代码来实现各终端的体验。这个做法其实比较接近我在评论里说的『单独给移动端开发页面』，然后通过UA等判断输出不同页面。当然结合RWD中的一些技术来降低开发成本&提高体验一致性也并不违反adaptive的目标。

我反对把AWD/RWD分别称之为自适应和响应式，因为中文的问题，这会让人误解两者的区别是media-query 或者 fluid grid技术。就比如说楼下贴的另一个问题中的答案 的自适应和响应式 就完全不是这回事儿。没有公认的统一的术语我一般极力避免使用。

总结一下概念吧

• responsive web design：相同一套html/css应用在不同终端，使大小屏幕都能有较好体验
  
  
  • fluid grid 百分比宽度布局
  • media query css响应窗口宽度等条件实现不同样式
• adaptive web design：通过服务端脚本实现不同终端输出不同的html/css/js，在保持大屏体验完美的基础上进一步提升移动端的加载速度/体验流畅等性能。实际上，原文中的 adaptive delivery可能是一个更好的用词。关键是这个技术RWD互相独立，可以共存也可以任意用其中一种。

Answer 2

借花献佛，贴一下 @justjavac 大神的回答：
http://segmentfault.com/q/1010000000333168#a-1020000000333198

Answer 3

我理解是响应式Responsive比自适应式Adaptive更加高级。自适应式只考虑了屏幕尺寸大小，主要使用CSS3的media query来适应。而响应式还应考虑到移动设备的触屏操作，比如：在手机上界面应变成类似于jQuery Mobile的操作界面。其实现在二者也是不大区分地使用了。

Answer 4

我这边的工作项目比较自由，自己对设计的改动可以较大，我为了兼容移动端的做法就是先做pc端，做好了用css的device-width检查来调整，我们这边的要求是只要信息传达出来就行，视觉优化我自己看着办，不行的话设计师提意见再改。

Answer 5

可以这么理解么，自适应效果是响应式效果的一个子集。自适应设计主要是要设定针对不同分辨率的宽度，用@media来查询屏幕宽度啊，主要是ipad ,iphone和pc啊，但这不就等于说响应式就不能设定固定宽度，响应式觉得就是靠一个css在任何屏幕分辨率下都可以保持同样的界面。怎么说呢，就是觉得自适应是廉价版的响应式【・ヘ・?】，但是感觉两者的真正的实际效果区别应该不能也不会很大啊。
菜鸟理解，勿喷，哦对了，前两天刚扒了一个本地测试响应式效果的工具https://github.com/dyygtfx/response-tool

Answer 6

自适应 也可以理解为响应式 ，但是响应式 并不一定是 自适应 ，响应式通过 css3 media query多媒体查询技术来实现， 方法有很多种。 所以，响应式包含了自适应，100%流式布局，多媒体查询，rem等等， 另外补充一个响应式测试工具 [跨屏测] http://Www.Kuapingce.Com