html响应式怎么自适应,大家怎么理解自适应与响应式

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

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

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

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

先搞定中间尺寸，也就是pad~small desktop这块

然后搞定大尺寸，往往是水平方向延伸一些元素出去

最后搞小尺寸手机，这块一般比较复杂，经常需要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互相独立，可以共存也可以任意用其中一种。