自适应设计和响应式设计

作者: binginto | 来源:发表于2017-06-29 15:51 被阅读0次

响应式网页设计
什么是响应式设计？响应式设计的优缺点有哪些？
17 网页设计与规范
响应式布局的必要性，历史以及技巧
响应式网页设计
关于响应式网页设计的总结
自适应设计和响应式设计
HTML5 中的 picture 元素响应式处理图片
自适应和响应式的介绍和区别
Tailwind Responsive

Paste_Image.png

自适应设计和响应式设计网页都是由于现在互联访问设备有着众多不通的分辨率，手机，pad，笔记本，PC，大大小小，形形色色。这两者都是为了适配不同分辨率的设备访问的一种网页设计技术。
响应式设计是采用 CSS 的 media query 技术，配合流体布局（ fluid grids ）和同样可以自适应的图片/视频等资源素材。以上所说，都是通过 HTML 和 CSS 就能完成的。一般来说，RWD 倾向于只改变元素的外观布局，而不大幅度改变内容。可以把 RWD 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术吧。
自适应设计在包括 RWD 的 CSS media query 技术以外，也要用 Javascript 来操作 HTML 来更适应移动设备的能力。有可能会针对移动端用户减去内容，减去功能。也可以在服务器端就进行优化，把优化过的内容送到终端上。通常会牵扯到另外一个词 “progressive enhancement” 。
progressive enhancement：从针对最低端的，最低分辨率的设备的设计做起，逐步逐步为更高阶的设备增加功能和效果的做法。（换个角度说，也就是相当于为移动设备减去功能）

参考资料:
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
http://geekplux.com/grid/
https://www.zhihu.com/question/20628050?rf=24334181