书名：响应式网页开发基础教程（jQuery+Bootstrap）pdf/doc/txt格式电子书下载

推荐语：

作者：郑婷婷,黄杰晟等编

出版社：人民邮电出版社

出版时间：2019-03-01

书籍编号：30498498

ISBN：9787115501301

正文语种：中文

字数：287758

版次：1

所属分类：教材教辅-中职/高职

版权信息

书名：响应式网页开发基础教程（jQuery+Bootstrap）

作者：郑婷婷　黄杰晟

出版社：人民邮电出版社

出版日期：2019-03-01

ISBN：9787115501301

版权所有 · 侵权必究

前言

响应式是伊桑·马卡特（Ethan Marcotte）在2010年5月提出的一个概念，这个概念是应移动互联网时代的浏览需求而产生的。响应式网页的核心在于“一次设计，普遍适用”，可以为不同终端的用户提供更加舒适的界面和更好的用户体验。随着移动终端的普及，响应式的网页设计可以说是“大势所趋”。

如何开发响应式网页，满足各种终端用户的浏览需求，是Web前端设计及开发人员需要思考的。本书根据响应式网页开发的技术主线编写，第1～3章介绍响应式网页开发的技术基础。首先，从响应式网页的概念出发，第1章讲解响应式网页设计基础，包括响应式的概念、媒体查询、响应式网页呈现等。由于响应式网页的实现框架多基于CSS 3+JavaScript，因此在第2章讲解了JavaScript基础，包括JavaScript编程基础、JavaScript对象及事件、结合CSS 3的一些应用实例等。第3章介绍了jQuery的基础。众所周知，jQuery是一个应用广泛的JavaScript框架，也是目前响应式插件应用及开发的基础，是响应式编程的重要手段，关于jQuery的讲解主要侧重于与传统JavaScript比较，介绍如何实现更高效的前端开发。第4～6章则主要介绍响应式网页框架的应用。从第4章开始，引入了热门的响应式框架Bootstrap，包括如何在网页中使用Bootstrap及其基本样式。第5章则围绕响应式布局方式展开，依次介绍了响应式布局的方式、布局元素以及Bootstrap中响应式布局的实现。第6章讲解Bootstrap组件设计，包括表单控件、导航及分页、消息提示、内置组件等。而第7章和第8章讲解响应式网页开发的一些应用实例，帮助读者加深对响应式网页开发技术的理解与认识。

本书提供了教学课件、源文件、工具、微课等教学资源，这些资源都可在人民邮电出版社教学服务与资源网上免费下载。在编写本书的过程中，编者充分考虑了初学者的特点，结合编者多年的Web前端相关的教学、开发、研究经验，精心设计教学案例，通过多个实例的讲解，力求循序渐进、深入浅出，让初学者易于接受。

Web前端开发技术是当今信息技术领域的一个热点，尤其响应式开发作为其中的新兴领域，大量新技术不断出现，由于作者水平有限，书中难免存在不足之处，敬请广大读者批评指正。

编者
2018年12月

第1章 响应式网页设计基础

1.1 什么是响应式网页

进入移动互联网时代，各种不同的移动智能设备层出不穷，比如说智能手机、平板电脑、可穿戴式设备等。据2017年8月第40次《中国互联网络发展状况统计报告》的统计结果，截至2017年6月，我国网民规模达到7.51亿，其中手机网民达7.24亿，占比达96.3%，较2016年底增长了1.2个百分点，与此同时，使用台式电脑、笔记本电脑等终端上网的比例却有所下滑。这意味着网民的上网设备进一步向移动端集中，移动互联网主导地位进一步强化。但各种不同的移动智能终端设备的屏幕大小和分辨率都是不尽相同的，而且即使是同一个设备，当用户旋转屏幕时，纵向和横向查看的屏幕尺寸也会有差异，所以如何使网页在不同的设备和不同的屏幕分辨率下都能达到理想的显示效果，使得用户不管通过什么终端都能达到理想的浏览和使用体验，是新型的网页设计与开发技术所要达到的需求。显然，传统固定布局的方式已经无法满足这种需求了，因此，现在越来越多的网站都已经开始采用响应式的思想来设计与开发网页。响应式网页设计已经成为当今网页开发技术的新潮流。

1.1.1 响应式网页设计的产生

响应式网页设计，全称是Responsive Web Design，最早是由伊桑·马卡特（Ethan Marcotte）在2010年提出的一个概念，最主要的动机是“如何使得页面布局适应任何的浏览窗口”。响应式页面的设计理念是，页面的设计与开发应当能够根据用户的行为以及设备环境（包括系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，也就是页面应该有能力去自动响应用户的设备环境。简而言之，这个概念指的就是网站的页面能够兼容多种不同的终端，根据不同的环境做出自动的响应及调整。

响应式网页开发的实现方案有很多，包括CSS媒体查询的使用、弹性网格和布局、流式图像等。无论用户使用的是哪种设备，响应式页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以实现自动的适应。

伊桑·马卡特在其个人网站上给出了响应式网页的简单示例。这个网站虽然简单，却具备了响应式网页的要素：自动适应、流式网格布局、流式图像显示等等。读者可以尝试浏览这个网页，通过手动拖动鼠标改变浏览器窗口的大小，查看在不同浏览器窗口尺寸下页面显示的变化。可以看到，在不同的浏览器窗口尺寸下，网页的地址没有发生变化，但网页的布局显示却可能有所改变，如图1-1所示。

图1-1　响应式网页在不同显示尺寸下的布局变化

1.1.2 响应式和“自适应网页”

提到响应式网页，不得不提的就是另一个“自适应网页”的概念了。初学者对于这两个概念往往容易混淆。响应式网页具有自适应的特性，是指页面能自动响应及适配用户的设备环境，但平常所说的“自适应网页”是否就是响应式网页呢？

答案是否定的。适配不同浏览环境的技术有很多，而传统意义上的“自适应网页”虽然也可以针对不同的浏览环境做出自动调整，但其使用的并不一定是响应式网页的技术。比如早期的一些网站或现在一些门户网站的首页，可以根据检测到的不同的客户端而提供不同的浏览网页，比如专门提供一个Android的版本，或者一个iPhone / iPad的版本等，这也是实现网站兼容不同终端的其中一种做法。我们往往可以看到一些“自适应”网站的首页，用PC端浏览时访问的是类似“www.xxx.com”的地址，而使用移动设备访问的是类似“m.xxx.com”的地址，可见打开的并非同一个网页。事实上这种做法同时提供了多个不同的网页，好处是可以极大地保证不同环境下的显示效果，但是缺点也非常明显，就是在网站维护时需要同时兼顾多个不同版本的网页，而且维护的工作将会呈几何级数上升。假如这个网站有多个入口，还会大大地增加架构设计的复杂度。所以，这种使用不同页面来适配浏览条件的方式，往往比较多见于网站的首页，因为如果网站的所有内容页都采用这种方式，这个网站的结构将会变得非常臃肿。而类似这种跳转到不同地址、打开不同网页的适配方式，并不能称为真正的响应式网页，只能叫作“自适应”的。

1.1.3 响应式网页的特点

响应式网页的核心思想，在于“一次设计，普遍适用”，强调的是让同一个地址的同一个网页自动地去适应不同的显示环境，并且能够根据屏幕的设置和布局需要，来自动调整网页内容的显示。而响应式的网站，不管使用什么设备，打开及显示的都是同一个地址、同一个网页，只是这个网页可以通过自动地识别屏幕宽度，对不同的使用环境做出相应的自动调整，从而造成网页的布局和内容展示在不同环境下时可能会有所不同。

开发响应式网页时，首先我们需要改变一下以往的观念，在开发时“以移动设备优先”。为什么要选择移动优先呢？第一个原因就是现在移动设备的使用率越来越高，而且随着移动互联网技术的发展，移动端的应用将成为重点。

还有基于网站开发流程方面的考虑。打个比方，想象一下我们搬家的时候，如果我们要把所有的东西从一个大房子搬到一个小房子，那么很有可能空间会比以前拥挤，而且如果东西太多放不下，可能要不得不舍弃掉一些东西，这种“舍弃”有时会是一个很艰难的决定。但是如果反过来，从一个小房子搬到一个大房子，那么空间会宽松很多。同样的道理，移动端稍微偏小的屏幕尺寸会使得空间比较受限，那么就要求我们在设计时考虑把最重要的内容优先加载和展示，这样，即使后面迁移到较大的屏幕，也可以保证整体的结构不会受到破坏，也许为了页面的美观可能需要增加一些内容，但毕竟做加法会比做减法容易得多。而且由于大小、带宽等限制，移动网页的设计绝大部分应该是内容性的设计，移动优先原则下提高用户体验的一大法宝，就是“把最重要的东西放在最显眼的地方”。

在这里先给出响应式网页的一些特点。在后面的学习中，我们将深入学习这些特点在网页中的实现。

（1）媒体查询技术（Media Query）。响应式网页往往包含多个媒体查询语句，用于适配不同的显示条件。

（2）流式网格布局（Fluid Grid Layout）。让网页元素来决定网格的大小和设计，并根据网页元素来决定所占用的网格位置尺寸。

（3）灵活的多媒体显示（Flexible Media）。根据不同设备、不同分辨率、不同网速等环境，来自动适配多媒体内容的显示。比如可以让同一个图像，在iPhone 6上显示“高清”的版本，而在iPhone 4上只显示“一般”的版本。

（4）高性能的JavaScript脚本。由于有些用户终端的运行条件有限，响应式网页里的脚本肯定要考虑运行效率的问题。现在已有一些较成熟的JavaScript框架，比如jQuery等，能大大改进脚本程序的运行性能和效率。

1.2 媒体查询及应用

1.2.1 媒体查询简介

媒体查询（Media Query）是CSS 3中获取用户行为和设备环境（比如屏幕宽度、屏幕分辨率、设备方向等）并适配相应的CSS规则的过程。媒体查询让CSS能更精确地作用于不同的媒体类型和同一媒体的不同条件，也可以为一些特定的输出设备定制特定的显示效果，从而为不同终端的用户都能提供较好的浏览体验。

媒体查询的定义要使用@media关键字所定义的规则。表1-1是@media规则对主流浏览器的支持。表格中的数字表示支持这个版本号及以上的浏览器版本，比如说对于IE浏览器，媒体查询支持IE 9.0及以上的版本。在测试响应式网页时，最好使用表中所示的这些版本号或以上的浏览器。

表1-1　媒体查询对浏览器的支持

1.2.2 媒体查询的基本形式

其实在CSS2中，就已经可以根据媒体类型获得不同的CSS支持。比如类似这样的HTML代码：

<link rel=\"stylesheet\" type=\"text/css\" href=\"site.css\" media=\"screen\" … />

<link rel=\"stylesheet\" type=\"text/css\" href=\"print.css\" media=\"print\" … />

这些语句在HTML标签中通过media属性来设置在不同视图下所调用的CSS样式表，比如screen表示计算机屏幕，而print则表示打印预览模式下内容的显示。所以这里的第1个link语句表示在计算机屏幕显示的样式设置，而第2个link语句则表示在打印模式下的样式设置。

在CSS 3中，媒体查询的功能更加强大，不仅可以定义不同模式下的样式显示，还可以扩展媒体类型的函数，并允许在样式表中使用更加精确的显示规则，这样就能够更灵活地对特定的设计场景使用自定义的显示规则。

媒体查询还可以在样式表文件或页面的<style type=\"text/css\">…</style>标签内定义。以下是CSS 3中媒体查询定义语句的基本格式：

@media (适用条件1) and/or (适用条件2)…{适用的CSS 样式}

媒体查询的定义首先用media关键字定义媒体查询，接着指定媒体查询的适用条件，这些条件可以是一个或多个特定条件设置的表达式，比如最小的屏幕宽度、最大屏幕宽度等，多个条件之间可以使用and或or来进行连接，最后是定义在满足指定条件下CSS样式的设置。

比如【例1-1】的媒体查询语句，就指定了在屏幕的宽度最大不超过300像素时，页面的背景颜色的显示将会变成指定的亮蓝色。

【例1-1】

@media screen and (max-width: 300px) {

        body {
             background-color:lightblue;
            }
}

媒体查询条件可以是多个。比如【例1-2】中的媒体查询语句就指定了多个限制条件，表示在屏幕的宽度在介于960像素和1200像素之间时，页面背景颜色的显示将会变成指定的黄色。

【例1-2】

@media screen and (min-width:960px) and (max-width:1200px){

   body{
         background:yellow;
         }
}

也可以使用类似CSS 2的形式进行媒体查询定义，不过适配的条件可以更精确。基本的格式：

link media=\"(适用条件1) \" type=\"text/css\" rel=\"stylesheet\" … <

如以下代码表示在屏幕宽度不超过768像素时适配的样式：

<link media=\"only screen and (max-width: 768px)\" type=\"text/css\" rel=\"stylesheet\" … >

媒体查询定义的@media后面支持多种媒体类型。CSS 3中提供了多种的媒体介质类型，常用的有屏幕screen和打印机样式print等，还有一些特殊设备，比如语音朗诵设备speech等。一个平台只有一种介质类型。表1-2是媒体类型的所支持的值的列表，可以看到有一些类型已经不适用了，现在使用的只有all、print、screen、speech这几种。

表1-2　媒体查询支持的媒体类型

如果指定对所有媒体类型都适用，可使用all指代所有支持的媒体类型，类似以下语句这样：

@ media all …

而如果要指定适用于多种设备，可以用关键字and来连接，比如类似以下的语句的定义表示同时适用于两种设备：

@media screen and speech …

还可以使用关键字only来表示只适用于某种设备，以及使用关键字not来排除某种特定设备。比如类似以下这种我们常见的这种写法，就表示样式定义只适用于屏幕：

@media only screen…

1.2.3 常用媒体特性

媒体查询可用于检测的媒体特性包括屏幕宽度、屏幕方向等，常用的特性如表1-3所示。

表1-3　常用媒体特性

媒体特性max-width是指当显示尺寸小于或等于指定的宽度时，所匹配的样式。例如，【例1-3】中的媒体查询表示只适用于屏幕的规则，如果浏览器窗口不超过500像素（即小于或等于500像素），背景将显示为浅蓝色。

【例1-3】

@media only screen and (max-width: 500px) {

    body {
          background-color: lightblue;
    }
}

而min-width则指的是显示尺寸大于或等于指定宽度时，所匹配的样式。如【例1-4】定义的媒体查询表示如果浏览器窗口不小于900像素（即大于或等于900像素），容器.wrapper的宽度为980像素。

【例1-4】

@media screen and (min-width:900px){

   .wrapper{width: 980px;
   }
}

在智能设备上，还可以根据设备的屏幕尺寸来设置相应的样式，比如min-device-width或者max-device-width。比如以下代码表示如果设备的最大显示宽度为480像素时匹配的样式，其中max-device-width指的就是设备当前的分辨率。

<link rel=\"stylesheet\" media=\"screen and (max-device-width:480px)\" href=\"iphone.css\" />

【例1-5】的媒体查询则定义了如果屏幕显示的方向是垂直的（orientation: portrait），背景将显示为浅蓝色。

【例1-5】

@media only screen and (orientation: portrait) {

    body {
          background-color: lightblue;
    }
}

如果要指定的媒体查询的特性有多个，也可使用and连接多个查询条件，比如【例1-6】的媒体查询表示如果屏幕的宽度在最小的320像素到最大的720像素之间时，网页的背景颜色将为红色。

【例1-6】

@media screen and (max-width:720px) and (min-width:320px){

      body{
       background-color:red;
       }

1.2.4 动手练习：制作响应式网页示例

在本节我们将使用Adobe Dreamweaver CC来开发响应式网页。Adobe Dreamweaver CC是Adobe公司发布的新一代网页制作及编辑软件，相比以前的版本，它集成了Bootstrap等响应式框架，能帮助用户更高效地开发移动优先、快速响应的网站。同时，还可以更便捷地利用媒体查询功能查看针对各种断点的设计，从而进一步完善网页的结构。另外Adobe Dreamweaver CC还支持实时视图下jQuery UI元素的查看，以及通过新增的DOM面板，可以更准确地插入、复制、粘贴、移动或删除页面元素。

下面我们开始使用Adobe Dreamweaver CC来建立第一个响应式网页，并对Adobe Dreamweaver CC的开发环境做一个初步的了解和认识。需要注意的是，Adobe Dreamweaver CC只支持Windows 7及以上的系统，不能在Windows XP环境下使用。另外，测试响应式网页的浏览器也最好使用较新的版本，比如IE 9.0以上，因为低版本的浏览器可能不支持响应式网页技术。

我们在Dreamweaver创建一个新的空白页面。在页面的<body>标签中添加一个id为test的div。代码如下所示：

<body>

<div id=\"test\">
</div>
</body>

把以下媒体查询的相关语句添加到<head>标签内：

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

<style type=\"text/css\">
/*该div的默认属性设置*/
#test{
        background: silver;
             width: 400px;
             height: 200px;
             margin: auto;
        }
/*媒体查询设置。当屏幕达到600px及以上时div的样式设置*/
@media screen and (min-width:600px){
#test{
             background:#EBEA89;
        }
}
</style>

可以通过Dreamweaver中的实时视图查看页面显示效果。手动拖动Dreamweaver的实时视图的右侧边界，修改实时视图大小，可以看到当实时视图宽度小于600像素时，这个test的div显示为默认的灰色背景颜色；而当实时视图宽度大于600像素时，这个test的div显示为一种类似淡黄的背景颜色。

也可以在浏览器中浏览、测试这个页面。现在有一些浏览器提供了响应式网页的测试工具。比如Google Chrome浏览器，在工具栏或使用组合键【Ctrl+Shift+I】打开“开发者工具”视图，单击“开发者工具”菜单栏中的“Toggle device toolbar”图标（见图1-2），即可打开模拟移动设备的调试工具。

图1-2　打开Toggle device toolbar

在模拟移动设备查看页面的上方有一些显示设置的参数，可以修改模拟的设备类型、切换设备屏幕方向（Rotate键）、设置网络状态等参数，比如可以把当前模拟的设备类型切换为iPhone、iPhone 6等，如图1-3所示。可以试试在这些设备上打开刚才的网页，查看显示效果。如需调试其他不在列表中的模拟设备类型，可通过图1-3菜单中的“Edit…”来添加。

图1-3　设置模拟设备及参数

1.3 响应式网页呈现

1.3.1 屏幕可视区域viewport

我们往往可以在响应式网页的<head>标签中看到类似这样的语句：

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0,

user-scalable=0\">

这个语句中的viewport表示的是屏幕的可视区域。通俗地说，viewport指的就是除去所有工具栏、状态栏、滚动条等之后用于显示网页的区域，这个语句的主要作用就是让当前屏幕可视区域的宽度等于设备的宽度，同时不允许用户手动缩放。这样可以避免浏览器的自动缩放功能给页面浏览带来的不便，因为在很多移动设备上的浏览器都会把自己默认的viewport设为一些大于设备本身屏幕宽度的数值，超过了屏幕本身的默认宽度，例如在iPhone上默认显示的网页区域是980像素。常见设备的默认viewport如表1-4所示。

表1-4　常见设备的默认viewport（屏幕可视区域）

viewport默认值一般大于设备本身屏幕宽度可以增加浏览器显示的范围（见图1-4），这样做虽然可以增加浏览器显示的范围，但因为浏览器可视区域的宽度比默认的viewport值要大，将使得浏览器会出现横向滚动条，有的浏览器会对页面进行自动缩小，使得网页浏览的效果不好。

图1-4　默认的viewport与设备尺寸的对比

为了避免滚动条的出现或页面的自动缩小，可以对viewport的属性进行设置。表1-5列出了viewport的常用属性。其中，width和height属性分别表示窗口显示的最大宽度和高度，initial-scale表示页面的初始缩放值，minimum-scale和maximum-scale则分别表示用户允许的最小和最大缩放值，而user-scalable则用于设置是否允许用户进行缩放操作。所以，以下的语句表示窗口显示的宽度为设备本身宽度，以原始尺寸显示，并且页面不允许缩放，这段代码往往被添加到响应式网页的<head>标签内：

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0,

user-scalable=0\"

这种设置可以保证响应式页面能自动根据设备本身的宽度显示最佳的浏览效果，而不至于在某些设备上出现横向滚动条或自动缩小。

表1-5　viewport常用属性

1.3.2 相对大小与绝对大小

页面元素大小的设置也是在响应式网页设计中需要注意的一个问题。我们在以往固定布局的页面中设置页面元素时，往往使用的是绝对大小单位px（像素），但在响应式页面中要适配不同显示环境的显示效果，使用绝对大小显然不能满足需要。因此，页面的元素大小设置最好采用相对大小单位，比如百分比、em、rem等。

这还涉及屏幕物理像素和CSS设置的像素的对应问题。在PC端的浏览器中，CSS的1个像素确实往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的错觉，让我们觉得对于所有的设备，CSS中的像素都是跟设备的物理像素是一样的。但实际情况却并非如此。在早期的移动设备，比如iPhone 3中，屏幕像素的密度都比较低，那个时候一个CSS像素也是等于1个屏幕物理像素。但后来随着设备显示技术的发展，移动设备的屏幕像素密度越来越高，比如iPhone 4的分辨率比iPhone 3提高了一倍，变成了640像素×960像素，但屏幕尺寸却没变化，这就意味着在同样大小的屏幕上，像素多了一倍，也就是说在iPhone 4中1个物理像素

....