响应式和自适应(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的尺寸的理解

原文地址:https://www.cnblogs.com/maixi/p/4609960.html