作者：(美)Benjamin LaGrone
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
响应式Web设计：HTML5和CSS3实践指南试读：
前言
本书提供了新的开发工具箱，保证开发者从中获取到最新的设计和开发技能。掌握了本书中所介绍的方法之后，你就能构建响应式应用程序，并且使得Web项目的移动版本能够按照最新的理念进行开发和设计也是其一大优势。本书中的示例都是真实的，通过类似于对站点改进的形式，在易于理解的描述下对照示例一步一步地实践，使得读者能够理解响应式设计的精髓，并可以完成一系列设备的响应式设计优化。本书中的主题涵盖了响应式元素和媒介、响应式字体、响应式布局，使用媒介查询，学习最新的响应式框架，开发移动设备优先的Web应用程序，优化响应式内容，使用JavaScript和jQuery实现无侵入式的交互。每节所对应的方法都能直接通过所提供的代码实现。本书内容
第1章涵盖元素创建，用于移动设备或台式机的优化。
第2章介绍如何使用流式字体，创建很棒的字体效果，以及使用HTML5画布和CSS3实现字体的立体特效。
第3章讲述如何创建可实际应用到项目中的响应式布局。你将学会如何使用视窗和媒介查询，使得Web站点在不同视区大小和类型下变成响应式。
第4章介绍如何使用新型框架，通过最新的响应式方法和交互方式，既快速又可靠地完成响应式站点的设计和交付，以及如何将旧的静态框架转换为响应式类型的框架。
第5章讨论如何实现Web应用程序的移动版本。该章通过jQueryMobile优先针对移动设备优化，并针对桌面视窗进行了优化。
第6章介绍如何获取用以构建和测试响应式Web项目的各种工具，并能够正确地使用。
第7章介绍如何编写独立于Web页面的JavaScript，以便为不同设备实现响应式交互打下基础。准备事项
你需要一个IDE（集成开发环境），推荐NetBeans或Eclipse（有操作指南指导如何使用）。还需要图像编辑软件，如Photoshop或GIMP。另外还要有一台Web服务器和一台本地服务器，如Apache或者其他本地托管应用程序，如XAMPP或MAMPP。读者对象
本书介绍的方法适用于当今所有无线网络设备，同时能够为Web开发者带来所期望的更快交付的革新技术，也为最新的移动网络设备提供更加直观的交互方式。提醒或重要的事项以这种格式呈现。提示及小窍门以这种格式呈现。读者反馈
我们永远欢迎来自读者的反馈。请让我们知道你对本书的想法，包括喜欢的内容或可能不怎么喜欢的部分。读者反馈对我们非常重要，有助于帮助我们今后出版优秀的图书。
可以通过发送邮件到
如果你是本书中某一个主题方面的专家，同时也有兴趣写一些东西或贡献自己的力量，就请访问作者指南页面www.packtpub.com/authors。客户支持
恭喜你拥有本书。我们准备了以下内容来让你的购买价值最大化。第1章 响应式元素及媒介1.1 简介
响应式Web设计是自我学生时代BBS上出现ASCII字符图形至今，Web开发领域最让人感到兴奋的事情之一。HTML5、CSS3及jQuery给旧网络注入了新生命，给使用你应用程序的用户带来乐趣和兴奋。本章介绍的几个方法将会帮助你构建自己的响应式HTML元素及媒介。
这些方法有易有难。所涉及的响应式Web设计的各种元素代码均能在本书中找到，因此书中所提到的所有内容都是可以实现的。每一个响应式Web设计的方法都有助于优化网站展示，无论你的用户使用何种尺寸的何种设备，都会从中得到令其惊叹的响应式Web体验。1.2 基于宽度百分比的图像缩放
本方法依赖于客户端编码来完成对于大图像的缩放功能。客户端只需单张图像来依据浏览器的窗口大小呈现图像。如果对于客户端的网络带宽有足够的信心，确信该操作不会使得页面加载变慢，那么本方法是比较可行的。1.2.1 准备工作
毫无疑问我们需要一张图像。使用Google的图像搜索来获取一张高分辨率的图像。例如，搜索robots，将会得到158000000条记录，还不错的结果。但是想要的是一张大尺寸的图像，因此单击Search tools选项，然后将Any Size选项改为Large。可以看到依然有4960000张图片可供选择。
该图像应该能够缩放以适配最大尺寸的可视区域。打开图像编辑软件。如果并未安装此类软件，也会有众多的免费图像编辑软件供你选择。Gimp便是其中之一，它是一款功能强大的开源图片编辑软件，因此下载是完全免费的。访问http://www.gimp.org即可获取。1.2.2 实现方式
通过图像编辑工具打开想要编辑的图像并且将其宽度设置为300px。保存编辑后的新图像，然后移动或者上传到你的Web应用所对应的资源文件夹中。
为了展示响应式特效，需要在HTML中嵌入图像和一些文字说明。如果没有足够的时间来阐述你的人生经历，没有关系，回到互联网并通过Ipsum生成器来得到一些文本样本。访问http://www.lipsum.com即可获取Ipsum文本段落。
在CSS文件中需要为文本段落、图像及图像包装器（wrapper）分别设置相应的类属性。文本段落设置为向左浮动，同时宽度为60%，图像包装器（wrapper）的宽度则为40%。
现在的布局方式为流式布局（fluid layout），但是响应式的图像效果依然不见踪影。目前的图像仍然是静态的，宽度依旧为300px。但是当添加了下面的CSS配置后，一切都会改变。为图像添加一个新的类，设置max-width属性值为100%。这会使得图像的宽度适应浏览器宽度的改变。接下来，将height属性设置为可动态变化的值。
到目前为止，经过优化并可以适应浏览器窗口大小改变的图片就已经呈现在读者眼前了。下载示例代码
登录http://www.packtpub.com可以下载通过你的账户所购买的所有Packt书籍的示例源码。如果是通过其他途径购买的本书，访问http://www.packtpub.com/support，完成注册即可通过电子邮件获取源码。1.2.3 工作原理
设置在CSS中图像元素的responsive属性会强制该元素100%占据其父元素的空间。当父元素的宽度改变时，图像元素也会相应改变并填充对应的宽度。而属性height:auto的作用在于保证图像自身的高宽比例不会发生变化。1.2.4 相关章节
·1.3节
·1.7节1.3 基于cookie及JavaScript的响应式图像
使用复杂的服务器端逻辑也能实现响应式图像。有时因为一些特殊的需求，开发者往往不能够采取最简单的方法来实现特定的目标。之前提到的基于宽度百分比的方法依赖于客户端来实现对于大图像文件的缩放。而本方法则是在服务器端依据客户的请求，返回恰当大小的图像文件。如果你正为网页加载过慢导致的网站性能问题而烦恼，也许该方法能够给不堪重负的服务器负载和网络带宽带来一些改进。1.3.1 准备工作
本条目所涉及的方法都需要在服务器端实现相应的功能。首先，服务器端需要提供PHP服务。其次，服务器端需要实现根据客户端的请求返回3张不同大小的图像的功能。1.3.2 实现方式
下面的JavaScript代码比较简单，创建一个基于用户设备屏幕尺寸的cookie。当客户端请求服务器端的图像时，运行在服务器端的PHP服务便会依据该屏幕参数决定返回何种大小的图像。
回到服务器端，在相应的Web资源路径下创建名为images的文件夹，同时新建PHP文件（名为index.php），以下为相应的PHP代码：
现在通过你的图像编辑软件，打开一张尺寸较大的图像，然后保存两份较小尺寸的新图像。如果原始图像为300px，那么新图像的大小可以分别保存为200px和100px。然后分别命名为robot.png、robot-med.png及robot-low.png，并上传到images文件夹中。
最后很重要的一点，将下面的HTML文件存放到服务器端的文档根目录中：
可以在下面的屏幕截图中看到该方法的执行结果。
虽然该方法只能根据屏幕大小返回特定的图像，并不完全是自适应的，但是该方法在服务器端提供与CSS媒介查询一样的功能。可以通过CSS给这些图片加上样式，或者使用JavaScript实现动画效果。将不同的方法结合在一起使用，能够更好地提供响应式内容。
本方法中所涉及的代码最初由我聪明的同行所创建，放置在http://www.html.it/articoli/responsive-images-con-i-cookie/上。1.3.3 工作原理
首先HTML文件中创建cookie用以记录设备屏幕的尺寸。当向服务端发起获取图片的请求时，就如同PHP中的include声明一样。首先检查声明的文件是否存在，然后读取cookie中的屏幕尺寸，最后返回与之适配的图像资源。1.4 使视频自适应于屏幕宽度
流媒体视频同样可以为响应式的。在HTML5页面中嵌入响应式视频是一件非常简单的事情。如video标签支持百分比的宽度设置，但是问题在于，该方案需要网站主机拥有对应的视频源。如果已经有视频源，那么一切都易如反掌。
不过，使用视频托管网站（如YouTube或Vimeo）比自己托管更具优势。首先，自己的托管服务器可能会受到带宽或磁盘空间的限制。其次，相比于使用自己的托管服务器，使用视频托管网站上传可用的Web视频的整个过程更加便捷。1.4.1 准备工作
视频托管网站允许你在自己的页面中嵌入iFrame或object代码片段，用以在你自己的网站中展示视频。但是iFrame或目标代码段不能用在video标签中。因此，为了实现响应式视频功能，所用的方法相对复杂一些，但是仍然不太困难。1.4.2 实现方式
在HTML中将视频源代码段嵌入div元素中，同时设置div元素为相对定位，其底部内边距设定为50%～60%。然后设定子元素，即视频iFrame对象为绝对定位，宽度为100%，高度为100%。这使得iFrame对象完全填充了父元素。
以下HTML代码展示如何通过iFrame标签从Vimeo获取视频信息：
下面的HTML代码展示如何使用老版本的YouTube标记对象：
以上两段HTML代码均依赖于以下CSS配置：
如果不希望视频占据整个页面的宽度，可以使用width及max-width属性来限制视频宽度。接着使用另外一个div元素包装在class属性为video-wrap的元素的外层，并且设定width属性为固定值，属性max-width的值为100%。
本方法适用于目前所有的主流浏览器。1.4.3 工作原理
该方法称为固有比率视频法（Intrinsic Ratiosfor Videos），由[1]Thierry Koblentz在网站A ListApart 上提出。在元素中所嵌入的视频具有固有的长宽比，并且被赋予了一个绝对位置。这就使得允许视频窗口大小改变的同时，锁定视频长宽比。[1] http://alistapart.com/article/creating-intrinsic-ratios-for-video。——译者注1.5 基于媒介查询的图像缩放
媒介查询是针对响应式图像的另一个有用和高度可定制的方法。这与通过设置宽度百分比来实现自适应宽度的方法并不相同。你的设计可能需要为不同的屏幕尺寸范围准备一些具体的图像宽度，而自适应宽度会打破你的设计。1.5.1 准备工作
这种方式仅仅需要一张图像。而且在客户端浏览器调整图像，而不是在服务器端。1.5.2 实现方式
HTML代码相当简单，使用标准的图像标签创建一个图像元素，如下所示：
先从一个简单的版本开始，创建一个媒介查询。该媒介查询将检测浏览器窗口的大小，如果浏览器屏幕大于1024px，将提供一张较大的图像，为较小的浏览器窗口提供较小的图像。媒介查询首先查找媒介类型screen，然后查找屏幕尺寸。当浏览器满足媒介查询条件时，将渲染小括号中的CSS。
现在给这张图像标签添加一个类属性。该类在不同的媒介查询中的响应是不一样的，如以下代码所示：
将CSS中的这个类添加到每个媒介查询中，所对应设置的尺寸都不相同。这将会使浏览器针对每个不同的尺寸窗口渲染所需的图像大小。媒介查询可与其他CSS类共存。接着，添加一个独立于媒介查询的CSS的类属性，设置图像属性为height:auto。这样只需添加一行CSS即可对两个媒介查询都起作用。
为了使图像能自适应于多个设备屏幕尺寸范围，可以结合max-width和min-width媒介查询。为大小介于1024～1280px之间的浏览器窗口指定图像尺寸，需要为screen添加一个min-width为1024px、max-width为1280px的媒介查询。
通过媒介查询方法便可实现针对多个不同的浏览器窗口尺寸设置对应的图像尺寸。1.5.3 工作原理
CSS3媒介查询在CSS中通过逻辑条件将浏览器依据窗口属性进行区分，并基于此来完成不同样式的渲染。该方法正是利用这一点来对不同的浏览器窗口尺寸设置一个不同的图像宽度。这提供了响应式的图像尺寸，因此你可以进行高粒度级别的控制。1.6 基于媒介查询的动态导航栏
媒介查询不仅限于调整图像大小。可以使用媒介查询为访问者提供更加动态的网页。可以使用媒介查询显示一个基于不同屏幕尺寸的响应式菜单。1.6.1 准备工作
为了实现一个响应式菜单系统，我们将使用两个不同的菜单，为三种不同的浏览器窗口尺寸显示一个动态菜单。1.6.2 实现方式
对于较小的浏览器窗口，特别是对移动设备和平板电脑，创建一个简单的select菜单，其只占用少量的垂直空间。这个菜单为导航选项使用了HTML中的form元素，通过触发JavaScript代码来加载选择的新页面。
对于较大的浏览器窗口尺寸，创建一个可以通过CSS设置样式的简单ul列表元素。这个菜单对于不同的媒介查询会接收不同的布局和外观参数，并且紧跟着select菜单被追加到同一个页面。
为了使菜单变成响应式，需要为目标浏览器窗口尺寸创建一个媒介查询。如果浏览器窗口小于800px，CSS将只显示拥有small-menu类的div元素中的select表单。对于所有较大的浏览器窗口，CSS将显示拥有large-menu类的div元素中的ul列表。当浏览器窗口跨越801px这样的临界宽度值时，页面上会呈现一个菜单切换的效果。
对于更大的屏幕尺寸，可以使用相同的ul列表，甚至可以使用相同的HTML，但是通过媒介查询来应用新的CSS从而交付一个完全不同的菜单。
对于中等尺寸的菜单，使用CSS来显示列表项为水平列表，如下面的代码段所示。
由此得到了一个水平的菜单列表。我们希望这个导航版本出现在中等尺寸的浏览器窗口中。将其放置在范围为801～1024px的媒介查询中，如下面的代码段所示。
试读结束[说明：试读内容隐藏了图片]