刘志东　陈天伟

摘要；移动智能设备的广泛应用，使得网页的设计要求必须满足移动设备端的完美呈现。该文在研究响应式网页设计的基础上，结合Bootstrap框架，以个人博客页面的响应式设计与实现为例，阐述了响应式网页设计的设计思想，说明了Bootstrap框架的在应用中的实现过程。采用基于Bootstrap框架的响应式网页开发，不但可以缩短开发周期，提高开发效率，还可以使网页适应千差万别的移动设备，具有广泛应用前景。

关键词：Bootstrap；响应式设计；HTMI～；媒体查询

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2017）07-0085-03

1背景

互联网进入Web2.0时代，同时随着移动通信技术的发展，越来越多的智能移动终端广泛地应用于各个行业，促使互联网应用必须适应移动终端的需要转向移动平台方向。目前移动终端种类繁多，如智能手机、智能手表，平板电脑等，移动终端與PC端最大的不同之处就是设备屏幕尺寸要小，同时不同设备的分辨率和尺寸也存在差异，PC端页面在移动终端上无法直接呈现。对于用户而言，要求在不同系统平台、不同设备尺寸、不同分辨率下，访问的页面都应该保持良好的布局性。为了满足用户对访问页面的一致性的体验要求，开发人员提出了基于Bootstrap框架的响应式网页设计理念，利用网页框架的通用模板，为用户设计能够自动适应不同设备需要的页面，提升了用户的体验。

2响应式网页设计

2.1概述

响应式网页设计是指在设计和开发页面过程中，根据页面的应用设备的尺寸、系统平台、分辨率、屏幕方向等，以及用户的需要能够对设备显示页面进行相应的布局和呈现。……