一、理论基础:什么是适应性网页设计？

2011年，网页设计师亚伦·古斯塔夫森(Aaron Gustafson)在其著作《适应性网页设计》中率先提出了适应性网页设计的概念。

适应性设计:为不同类型的设备创建不同的网页，并在检测到设备的分辨率后调用相应的网页。目前，AWD网页主要针对这些决议(320，480，760，960，1200，1600)

与响应性网页不同，适应性设计使用基于断点的静态布局。一旦页面被加载，它就不能被自动修改。自适应将自动检测屏幕大小，以加载适当的工作布局。因此，当您打开浏览器浏览计算机上的网页时，网站将自动检测并选择桌面屏幕的最佳布局。

二.实用方法:如何做适应性网页设计？

基本网页设计包括几个重要的链接:

早期原型设计(工具:Axure、Mockplus)

UX设计(工具:贾丝汀明)

用户界面设计(工具:草图)

后来，前端和后端，超文本标记语言，CSS，JS。

要做好适应性网页的设计，需要遵循以下步骤:

第一步。元标签

为了适应屏幕，许多移动浏览器会将网页放在更大的视口宽度(通常比屏幕宽度大)，您可以使用视口元标签来设置。以下视口元标签告诉浏览器，视口宽度等于设备屏幕宽度，无需初始缩放:

Html结构

在本例中，页面布局包括页眉、内容、边栏和页脚。标题的固定高度为180像素，内容宽度为600像素，边栏宽度为300像素。

五个例子告诉你:什么是适应性网页设计

第三步。媒体查询

CSS3媒体查询是自适应网页设计的关键，就像高级语言中的条件语句一样，它告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)呈现网页。

三.适应性网页设计示例

目前，许多网站已经在PC机和手机上采用了自适应设计，在不同设备上浏览网页时可以很好地体验自适应网页设计。例如，亚马逊、今日美国、苹果和About.com等。然而，移动网站上显示的适应性设计的布局可能不同于桌面版本。因此，在设计适应性网页时，设计师需要做更多的工作来满足至少6个常见的布局要求。

这里有一些适应性网页设计的优秀例子供你参考。

1.亚马逊河

与其他使用适应性网页设计的网站(如美国有线电视新闻网)相似，亚马逊鼓励用户下载其品牌应用。据报道，通过采用自适应设计，亚马逊的移动终端的访问速度比之前的响应网页设计提高了40%。此外，亚马逊的适应性网站为移动用户提供了在移动设备上使用“亚马逊网站全文”的机会，而被动设计则没有。

五个例子告诉你:什么是适应性网页设计

2.苹果

苹果的设计一向以简单著称，这反映在它的网站、商店和产品设计上。苹果公司因没有采用响应性网页设计而受到批评。毕竟，其智能产品系列是响应设计存在的原因之一。现在，苹果采用了自适应网页设计，这也意味着苹果的官方网站将随着设备的类型和功能而改变。

五个例子告诉你:什么是适应性网页设计

3.第32大道

在线奢侈品购物网站Avenue 32是适应性网页设计的典范。该品牌的特色是设计师与Usablenet合作，创造无缝、直观和视觉上吸引人的移动和平板电脑体验。Usablenet称，桌面网站上充斥着丰富的网页，包括产品图片、设计师细节、策展外观等。品牌必须创造一个视觉和功能上与桌面体验一致的多渠道网络产品。

Usablenet首席营销官卡林·范·库伦(Carin van Cuuren)表示:“适应性网页设计的采用使得Avenue 32能够突出其移动发现和业务功能，从而使客户能够随时随地浏览和购物。”此外，智能手机和平板电脑订单增加了40%，移动通信量增加了一倍，平均移动交易量增加了27%。"

五个例子告诉你:什么是适应性网页设计

4.《今日美国》

适应性网页设计允许《今日美国》选择适应性方法，因为该技术允许品牌通过考虑操作系统和屏幕大小来检测特定设备，从而提供量身定制的体验。“因此，提供比回应更丰富的新闻体验可能更受欢迎。

五个例子告诉你:什么是适应性网页设计

5.About.com

各种新闻网站都采用自适应网页设计，因为它可以快速加载网页，满足不同设备的读者访问网站。

五个例子告诉你:什么是适应性网页设计

以上五个自适应网页设计案例从不同角度，无论是从网页访问速度、品牌影响效果还是用户体验，都极大地解释了自适应网页设计为何变得流行。