响应式网页设计

【英】Ben Frain所著响应式web设计HTML5和CSS3实战（第二版）对本文有参考

相关名词解释

响应式网页设计

响应式网页设计就是当用户打开一个网站时，网站内容的样式会随着用户使用设备以及视口的不同而·产生相应变化的一项人性化设计，目的是使用户的观看体验得到提升

RWD

即为响应式设计的英文解释：responsive web design

HTML5

是万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言的第五次重大修改

CSS3

CSS即叠层样式表，在网页制作中使用叠层样式表，可以更精确地对页面的布局，字体，颜色，背景，以及其他效果进行控制。CSS3则是CSS的升级版本

为何我们需要响应式设计

StatCounter-comparison-ww-monthly-201601-201612.png

http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/2016

这是由 (互联网与新媒体)市场调查机构 statcounter 上所找到的一张2016年1月至12月，全球桌面与移动设备与平板设备各自所占市场份额的一张图表·。

由图表可以看出，桌面所占市场份额在十月中旬已被移动设备所超过，用户们大都开始使用移动端设备来连入互联网。如何提升用户在手机上浏览的观赏效果，从而提升网页的流量，成为当今网站开发者的一项重大任务和目标。

而响应式网页设计的提出满足了制作者们的需求，对于预算不足的开发者而言，响应式设计可以大大节省成本。响应式网页设计可以适应大多数的设备的页面，网页开发者在设计之初只需要设计桌面以及手机设备上不同的两种方案即可，大大节省了设计成本，也省去了后期维护的成本，只需要维护一个网站即可。

由此看来，响应式网页设计有着十足的使用价值。

相关使用案例

使用了响应式网页设计的网站：微软官网

1.png

3.jpg

https://www.microsoft.com/zh-cn/

由微软的案例可以看出，当使用了响应式网页设计后，在不同的设备,视口，网站可以自行进行网页大小，横竖的优化，以此给用户带来更佳的观看效果。

没有使用响应式网页设计的案例：华附南海实验高中官网

4.png

5.jpg

http://www.hfedu.cn/

没有使用响应式网页设计的网站，在手机等移动端设备进行浏览时，字体变得十分渺小，难以分辨，降低了用户的观看体验度。

弹性网格布局

在一般的情况下，网页布局是弹性的，在不同的设备打开网页，网页会自动根据设备的屏幕长宽进行缩放，自动重排。

浏览器中用于呈现网页的区域称为视口，视口并不等于屏幕的大小，尤其是在可以缩放浏览器窗口大小的情况下。

在这种情况下，网页所呈现的文字是十分小的，令人难以分辨，因此为了解决这个问题，而RWD的弹性网格布局能很好地解决这个问题，它能应对不同的设备进行重新渲染，使网页的布局随着设备或视口的变化而变化，以达到令用户更佳的观看体验。

弹性图片

在一个网页中，图片是最能吸引观众的一部分。如何令图片在不同设备上，视口上呈现出最佳的表现效果，就使弹性图片的使用目的

使用了弹性图片技术，图片就能随着设备的宽度进行自如的缩放，使小窗口也能塞下大图片，令网页的美观度达到预期

媒体查询

CSS媒体查询可以让我们针对特定的设备或条件为网页应用特定的CSS样式。我们都知道，当视口宽度超过600像素的时候，当前页面的布局会存在被严重拉伸的问题，使用CSS3的媒体查询根据屏幕宽度来调整布局，就可以使页面变为网页应用样式。

响应式网页设计与前后端关系

前端一般指的是网页的设计师，一般与用户直接进行交互过程，而后端一般为工程师，负责的是网页的维护，数据的存取，权限的管理以及相关计算的运行。

想要了解更多，一下是“响应式web设计”的提出者Ethan Marcotte在A List Apart 上所写的一篇文章，可以点击链接，进行了解。

http://www.alistapart.com/articles/responsive-web-design/