宋亭燕　　佟欧

【摘 要】随着移动互联网的飞速发展，移动终端设备（如智能手机、平板电脑）因其携带方便以及可随时随地接入互联网的优势，而使其成为多数人访问网络的主要工具。但由于同一个网页在不同尺寸大小的屏幕上的显示效果是不同的，这就需要利用响应式Web设计的实现方法使网页做到自动适应屏幕的大小。本文从弹性布局、弹性图片和媒体查询三个方面阐述了响应式Web设计的实现方法。

【关键词】响应式Web设计；移动终端；布局

引言

随着智能手机和平板电脑的普及，越来越多的人习惯了拿起手机就上网，因此，手机端网站建设的需求也逐渐增加。由于PC端和移动端设备的视口差别很大，同一个网页不可能在不同视口下都完美的显示出来，而为每一种屏幕尺寸都设计制作一个对应宽度的页面也是不现实的。因此，探索出一种可适应不同视口宽度的网页开发方法才是需要我们解决的问题。

响应式网页设计（Responsive Web Design）由Ethan Marcotte于2010年5月在他发表的一篇文章中提出。在这篇具有开创性意义的文章中他将三种已有的开发技巧（弹性布局、弹性图片、媒体和媒体查询）整合在一起，提出了响应式网页设计的概念。概括来说，响应式网页设计就是针对任意设备对网页内容进行完美布局的一种显示机制[1]。

一、弹性布局

由于要适应不同分辨率的显示要求，固定宽度的页面设定显然已不能完美的显示页面内容。这时，弹性流体布局的应用可以很好的解决这样的问题。……