自适应网页设计从字面的上的理解就是自己能够适应，不断的改变。这个概念是 2010 年 Ethan Marcotte 提出了” 自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别萤幕宽度、并做出相应调整的网页设计。

自适应网页设计的出现主要是想解决目前移动装置与 PC 端网站之间的显示问题，记得在手机网站还没有的时候我们只会关心 PC 端的设计，就拿我们 WordPress 网站建设行业而言更多的还是专注到显示器尺寸的大小然后设计网站的页面大小，但可能也打不到所有的满足，更多的是看什么显示器占主导因素而决定的。

随着 3G 的普及，越来越多的人使用手机上网。移动装置正超过桌面装置，成为访问互联网的常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的装置上呈现同样的网页？手机的萤幕比较小，宽度通常在 600 画素以下；PC 的萤幕宽度，一般都在 1000 画素以上（目前主流宽度是 1366×768），有的还达到了 2000 画素。同样的内容，要在大小迥异的萤幕上，都呈现出满意的效果，并不是一件容易的事。

所以自适应网页设计的出现让我们解决了这个问题，不会再去做一下专项的设计，比如手机版、 ipad 版等等。不但版本多难以管理，如果一个网站只有一个版本从人力物力方面都是一种节约。

如果萤幕宽度在 600 画素到 1300 画素之间，则 6 张图片分成两行。

如果萤幕宽度在 400 画素到 600 画素之间，则导航栏移到网页头部。

如果萤幕宽度在 400 画素以下，则 6 张图片分成三行。