2。2。3 JavaScript介绍

JavaScript（简称js），是一种网络脚本语言。目前，所有主流浏览器上唯一支持JavaScript这一种脚本语言。当页面被加载时，浏览器会逐行解释源代码从而创建DOM(文档对象类型),而JavaScript通过操作DOM（文档对象模型）可以修改页面内容。 另外，HTML页面通过JavaScript下的Ajax的作用，在不重新刷新页面的情况下就可以从服务器上获取数据并显示，因此用户体验将会被大幅度提高。

在网页里面，js主要有两种实现方式，一是直接在网页中使用<script> 和 </script>，在标签中间写入js语言，<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。二是把脚本保存到外部文件中，外部 JavaScript 文件的文件扩展名是 。js。然后使用<script src="myScript。js"></script>引入外部文件，src属性中设置js路径。

2。2。4 jQuery介绍

jQuery 是辅助JavaScript 开发的工具，是一个轻量级的JavaScript库。jQuery使 HTML 页面的插件和代码分离开来，也就是说代码中将不再需要写进 JavaScript 语言来进行调用，而只需要命名元素的 ID，通过 ID 来识别插件，使得开发代码量降低的同时实现更多的功能。jQuery是开源、免费的js库，并且可以有效地兼容多个浏览器。jQuery 擅长操作文档对象、DOM 元素处理、Ajax 功能处理。jQuery 重写了早期的函数，更新了许多对 Ajax和Json的处理，在网页语言中嵌入调用地址来实现[7]。

2。3 响应式的概念和关键技术

响应式Web设计(Responsive Web design)的理念是：页面有能力去自动响应用户的设备环境,即自适应调整，也就是说响应式网页设计就是一个网站能够兼容多个终端（移动智能终端，PC端等），而不是为每个终端做一个相对应的版本。Bootstrap的响应式设计对媒体查询、弹性布局进行了整合[8]。媒体查询实现根据设备特性对页面布局进行分级控制，利用弹性布局可以创建可流动、可缩放的弹性版式，这两者是响应式设计的核心技术。

2。3。1 媒体查询

在CSS3中，W3C引入了媒体查询（Media Queries）这一新特性，这一新特性不仅仅像CSS2。1那样定义了媒体类型，而且更重要的是它支持移动终端的功能特性的检测。媒体查询通过检测移动终端的媒体类型、屏幕宽度、屏幕高度、横向或纵向的设备方向等各种功能特性以及响应式web设计最为常见的浏览器窗口的宽度（width）,去匹配与之相关联的CSS文件中的样式表，从而改变页面布局。因此Web设计者只需要根据屏幕分辨率等级（屏幕宽的像素值乘以屏幕高的像素值）以及浏览器窗口的宽度来编写他想要的页面布局样式，然后通过媒体查询，上网设备就来选择相对应的页面的布局，从而改善用户浏览体验。没有CSS3的媒体查询模块，就不能针对各式各样的移动终端特性匹配特定的CSS样式。

设备类型和一个或多个检测媒体特性的声明构成了媒体查询表达式，媒体特性包括媒体特性名称和值，用冒号“:”将其分隔。媒体查询的语法为：“@media 媒体类型and (媒体特性) {样式代码}”，其中媒体类型常用的有all（所有设备）、screen（电脑显示器）、print（打印机或者打印预览）。CSS3中定义的媒体特性共有13种，分别是视口宽度width、视口高度height、设备屏幕分辨率宽度device-width、设备屏幕分辨率高度de⁃vice-height、输出设备是栅格还是位图grid[0|1][9]等等。例如“@media screen and (min-width: 768px){}”表示视口宽度小于768px适用。 

2。3。2 弹性布局

弹性布局，是在移动终端实现的页面基础上，将文本的宽高由原来的固定多少像素（px）调整为字体比例（em）。