响应式和自适应（Responsive design 和 Adaptive design）

 

前二天做了几个手机端页面，本来用CSS3的@media 但因为对它还不是很了解，调试多次不成功。因为时间比较赶，为了实现最终的页面效果，我用JS去获取了屏幕的大小去控制了最终的字体大小。

做完后闲下来我查了一下资料，更加深入的去了解了一下何为响应式。发现原来我最终的页面，只能叫自适应，而不叫响应式。对于页面来说 没有实际上显示的问题（经过查资料显示貌似自适应比响应式更完善）不过我的初衷还是做响应式，在做响应式遇到问题时临时做的自适应。

响应式的基本概念是：

　　简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。  ——来源（百度）

（采用 CSS 的 media query 技术，配合流体布局（ fluid grids ）和同样可以自适应的图片/视频等资源素材。以上所说，都是通过 HTML 和 CSS 就能完成的。一般来说，响应式 倾向于只改变元素的外观布局，而不大幅度改变内容。Jeffrey Zeldman 总结说，我们就把 自适应 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术吧。   ——来源（知乎上的回答）

自适应的解释：

　　Adaptive Design 是 Aaron Gustafson 的书的标题。他认为 自适应 在包括 响应式 的 CSS media query 技术以外，也要用 Javascript 来操作 HTML 来更适应移动设备的能力。自适应 有可能会针对移动端用户减去内容，减去功能。自适应 可以在服务器端就进行优化，把优化过的内容送到终端上。自适应 通常会牵扯到另外一个词 “progressive enhancement” 。
progressive enhancement：从针对最低端的，最低分辨率的设备的设计做起，逐步逐步为更高阶的设备增加功能和效果的做法。（换个角度说，也就是相当于为移动设备减去功能）　　

 

还有一种说法：

响应式 一般来说需要在网页设计初期就开始（通常采用 mobile first 策略），所以旧的网站要做 响应式很可能要完全重建。而 自适应 则采用保留现有桌面网站（ desktop version ）而对于更小的分辨率做针对性的优化（适应），这点对于很多老的网站来说很重要，因为重构成本太大。

为什么我的@media screen出现问题，我还在查找总结问题。 大概是我在做屏幕尺寸判断时有问题。 最近 再做测试 做一个完整的@media screen 一些尺寸判断。 再加深一下对screen的尺寸的理解