即把文本的宽高（px）在当前基准字号（font-size）下折算出多少个em,例如在一个480分辨率下一个64px*64px的文本，其父容器的字号（font-size）为20px,那它折算成em就是3。2em*3。2em。当其父容器的基准字号根据不同分辨率变化的时候，该文本的宽高也能根据这个字号成比例的缩放，相应地该文本也就实现了响应式。

2。3。3 Bootstrap栅格系统

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义class，还有强大的mixin用于生成更具语义的布局。bootstrap3。x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图2-1所示。

图2-1：四种栅格选项

四种栅格选项之间的区别就是适合不同尺寸的屏幕设备。他们分别是col-xs、col-sm、col-md、col-lg， lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是extrasmall的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。 而col-xs-*中的*通常是个数字，表示在屏幕设备上，该图片占有*个列的宽度。通过上述原理，本系统就能对多个图片进行合理布局。

2。4 开发工具与运行环境文献综述

拥有合适的开发工具和良好的运行环境，对于本网站的开发起得事半功倍的效果。本网站使用NotePad++作为代码主要编写工具。基于HTML5的响应式课程网站的调试则选择Googel Chrome 和Firefox。

2。4。1开发工具Notepad++

Notepad++是一款程序员可免费使用的文本编辑器。该软件支持27种编程语言，包括HTML5在内，而对于本网站开发所用到的HTML5网页编程代码，可直接选择在不同的浏览器中打开查看，以方便进行调试。其内置支持多达27种语法高亮度显示（包括各种常见的源代码、脚本），还支持自定义语言。Notepad++有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。

2。4。2 bootstrap前端框架

Bootstrap是基于HTML5, CSS3, JS的简洁灵活的前端框架, 并基于jQuery进行了完善，本网站用它开发响应式网站，支持多终端移动设备。Bootstrap包含了许多的Web组件，根据这些组件，可以轻松地搭建出清爽风格的界面以及实现良好的交互效果。其中包括以下组件：按钮下拉菜单、导航、导航条、警告对话框、媒体对象等。除此之外Bootstrap还具有以下特点：支持所有主流浏览器、12列栅格系统、响应式布局设计、样式化的文件和常用的定制的jQuery插件等等。

Bootstrap提供了帮助不同水平的用户学习的方法，在本网站的开发过程中，用到的是编译并压缩好后的CSS, JavaScript的Bootstrap框架。具体操作方法是，把压缩包下载到本地，然后解压到相应的目录下，目录结构如下图2-2所示。来.自^优;尔|论,文:网www.youerw.com +QQ752018766-

图2-2：bootstrap的基本文件结构

预编译文件可以直接使用到任何 web 项目中，可以根据情况，在具体的项目中任意使用上述文件，即不同的文件可以被引入到不同网站中，实现想要达到的效果。 

2。4。3 Google Chrome

Google Chrome被称为谷歌浏览器，是基于Chromium的稳定版本。 Chromium是一个开源的与Windows， Linux和Mac OS兼容的Web浏览器。该浏览器如下图2-3所示。

图2-3：Google Chrome

提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面是它的目标。因此Google Chrome的特点是简洁、快速。GoogleChrome支持多标签浏览，它为每一个新建的标签都开启一个线程，因此，当一个标签崩溃时，其它标签能够正常工作。此外，Google Chrome基于WebKit和更强大的JavaScript V8引擎创建，这是当前其它Web浏览器所无法实现的。有了V8引擎与Webkit强强组合，使得浏览器打开速度很快，并且具有极强的渲染性能，能够很好地支持HTML5。