快速了解网站自适应和响应式

文章开始我们先直观感受一下

静态布局（左）          流式布局（右）

自适应网页设计（Adaptive Web Design）指能使网页自适应显示在不同大小终端设备上的网页设计方式及技术。

自适应设计：为不同类别的设备建立不同的网页，例如，智能手机、电脑等特定布局。用户在使用时，系统自动检测使用者的设备分辨率大小后调用相应的网页布局。

自适应设计是基于断点式的静态布局。

（示例网站来源于网络）

2010年5月份，由Ethan Marcotte提出的一个概念，一个网站兼容多个终端，并非为每个终端做一个特定的版本。

融合了流式布局+弹性布局，再搭配媒体查询技术使用。分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，使页面元素宽度随着窗口调整而自动适配。

屏幕分辨率不同元素位置和大小会相应的不同。

（示例网站来源于网络）

随着越来越多的设备投放市场，全球各地的人们都在迅速适应。这使得在响应式和自适应设计之间进行选择变得更加复杂。

而网站制作，采用响应式布局还是自适应布局的关键在于您的需求，目标和预算，进而规划您的网站建设策略。