2011年，网页设计师Aaron Gustafson在他的书《自适应网页设计》里率先提出了自适应网页设计的观点。
Adaptive design (自适应设计)：为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页。目前AWD网页紧张针对这几种分辨率（320，480，760，960，1200，1600）
和相应式网页不同，自适应设计是基于断点利用静态布局，一旦页面被加载就无法再进行自动适应，自适应会自动检测屏幕的大小来加载适当的事情布局。因此，当您在电脑上打开浏览器浏览网页时，该网站会自动检测并选择该桌面屏幕的最佳布局。
二、实践方法：如何做自适应网页设计？
根本的网页设计涵盖了几大主要环节：
前期的原型设计（工具：Axure，Mockplus）UX设计(工具：Justinmind）UI设计（工具：Sketch）后期的前后端，HTML,CSS, JS.而做好自适应网页设计则须要遵照以下几个步骤：
Step 1. Meta 标签
为了适应屏幕，不少移动浏览器都会把HTML页面置于较大视口宽度（一样平常会大于屏幕宽度），你可以利用viewport meta标签来设定。以下viewport meta标签见告浏览器视口宽度即是设备屏幕宽度，且不进行初始缩放：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Step 2. HTML构造在这个例子中，页面布局包括 Header, Content, Sidebar和Footer. Header固定高度为180px, Content宽600px, Sidebar宽300px。
Step 3. Media Queries
CSS3 media query是自适应网页设计的关键，就像高等措辞里的if条件语句，见告浏览器根据不同的视口宽度（这里即是浏览器宽度）来渲染网页。
三、自适应网页设计范例
目前很多网站在PC端和手机端已经采取了自适应设计，在不同的设备上浏览网页时已经可以很好的体验到自适应网页设计。比如，Amazon, USA Today, Apple, and About.com等。但自适应设计在移动网站上显示的布局可能与桌面版本会有所不同。以是，做自适应网页设计时，设计师须要做更多的事情来知足至少6种常见的布局需求。
这里有一些精良的自适应网页设计范例供各位设计师朋友参考。
1. Amazon
与利用自适应网页设计（如CNN）的其他网站类似，亚马逊鼓励用户下载其品牌运用。 据宣布，通过采取自适应设计，亚马逊移动真个访问速率比以往的相应式网页设计提高了40%。并且，此外，亚马逊的自适应网站为移动用户供应了在移动设备上利用“Amazon.com全站点”的机会，而相应式设计并不会供应。
2. Apple
苹果的设计向来以简洁著称，不论是它的网站、商店，还是产品设计无不表示着这一主题。没有采取相应式网页设计，这一点让苹果饱受诟病。毕竟，它的一系列智能产品便是相应式设计存在的缘故原由之一。现在，苹果采取了自适应网页设计，这也意味着苹果的官网将会随着设备类型和功能做出改变。
3. Avenue 32
在线奢侈品购物网站Avenue 32是一家采取自适应网页设计的典范。该品牌的特色是设计师与Usablenet互助，创造出无缝，直不雅观和极具视觉吸引力的移动和平板电脑体验。根据Usablenet的说法，桌面版网站上充满了内容丰富的网页，包括产品图片，设计师细节，策展的外不雅观等等，这个品牌必须创建一个视觉和功能上与这种桌面体验同等的多渠道网络产品。
Usablenet首席营销官Carin van Cuuren表示：“采取自适应网页设计使Avenue 32能够突出其移动真个创造和商务功能，从而使客户能够随时随地浏览和购物。 “而且，智好手机和平板电脑的订单增长了40%，移动流量翻了一番，均匀移动交易增长了27%。”
4. USA Today
自适应网页设计让“今日美国”（USA Today）选择了一种自适应方法，由于该技能许可品牌通过考虑操作系统和屏幕尺寸来检测特定设备，以供应量身定制的体验。” 因此，供应比相应式更丰富的新闻体验可能会更受欢迎。
5. About.com
各种新闻网站都采取了自适应网页设计，由于它能快速加载网页和知足所有不同设备的读者访问网站。
以上5个自适应网页设计的案例从各自不同的角度，不管是网页的访问速率，品牌影响效应，或是用户体验方面都极大的解释了为什么自适应网页设计会变的盛行起来。
本文由 @安静的熊师长西席 原创发布于大家都是产品经理。未经容许，禁止转载。
