什么是自适应网页设计

导语：移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页?自适应网页设计的出现很好的解决了这个问题。这篇文章将带你了解一些关于自适应网页设计的基础知识和设计范例。

　　一、理论基础：什么是自适应网页设计?

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标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放：

　　Step 2. HTML结构

在这个例子中，页面布局包括 Header, Content, Sidebar和Footer. Header固定高度为180px, Content宽600px, Sidebar宽300px。

　　Step 3. Media Queries

CSS3 media query是自适应网页设计的关键，就像高级语言里的if条件语句，告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)来渲染网页。