自适应网页设计Adaptive Web Design(AWD)与响应式网页设计Responsive Web Design(RWD)概念
网站建设公司
2024-03-14 15:31:40 浏览量:1839Aaron Gustafson与Ethan Marcotte分别在2011年自己的著作中提出自适应网页设计Adaptive Web Design (AWD)与响应式网页设计Responsive Web Design (RWD)概念,
它们核心区别在于 :自适应(AWD) 针对不同设备或屏幕尺寸定制化设计多个固定布局的尺寸,而响应式( RWD) 是同一套代码做弹性的适应,本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题。
运行机制不同;响应式(RWD)是主动式的响应设计,自适应(AWD)是被动式的响应式设计;响应式(RWD)不管用户使用的是什么设备,都是在服务器把数据推送到浏览器,脚本或CSS自行侦测屏幕大小,再执行对应的样式表内容,并且一直通过本地脚本在监听屏幕大小的变化,随时做出样式响应的变化,所以是主动式的。
自适应(AWD)是用户通过浏览器发送请求后,服务器根据请求中夹带的用户设备信息做出判断,调用已经在服务器里准备好的适应对应设备样式文件+HTML内容+JS,返回给浏览器以响应不同设备。
以下是七种对应不同情况的响应式设计模式,非常全面地涵盖了其它设计体系中的绝大部分方案;
1.调整大小(Resize)

2.重新定位(Reposition)

3.重新排列(Reflow)

4.显示/隐藏(Show/Hide)

5.替换(Replace)

6.重新构建(Re-architect)

7.内容密度(Density)

图来源:https://www.yuque.com/jingwhale/blog/ln6gbp