图灵社区会员 lemoggy(lemoggy@foxmail.com) 专享 尊重版权 

内 容 提 要 移动互联网时代到来了。本书将当前 Web 设计中热门的响应式设计技术与 HTML5 和 CSS3 结合起来， 为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。不仅讨论了媒体查询、流式 布局、相对字体、响应式媒体，更将 HTML5 和 CSS3 的相关知识点一并讲解，是学习最新 Web 设计技术 不可多得的佳作。 本书适合各个层次的 Web 开发和设计人员阅读。 ◆ ◆ ◆ 图灵程序设计丛书 响应式Web设计：HTML5和CSS3实战 著　　　　[英] Ben Frain 译　　　　王永强 责任编辑　李松峰 人民邮电出版社出版发行　　北京市崇文区夕照寺街14号 邮编　100061　　电子邮件　315@ptpress.com.cn 网址　http://www.ptpress.com.cn 北京　　　　　　印刷 开本：800×1000　1/16 印张：15.5 字数：360千字 印数：1 — 4 000册 2013年 1 月第 1 版 2013年 1 月北京第 1 次印刷 著作权合同登记号 图字：01-2012-5558号 ISBN 978-7-115-29922-2 定价：49.00元 读者服务热线：(010)51095186转604　印装质量热线：(010)67129223 反盗版热线：(010)67171154 图灵社区会员 lemoggy(lemoggy@foxmail.com) 专享 尊重版权 

错误！文档中没有指定样式的文字。 1 版 权 声 明 Copyright © 2012 Packt Publishing. First published in the English language under the title Responsive Web Design with HTML5 and CSS3. Simplified Chinese-language edition copyright © 2013 by Posts & Telecom Press. All rights reserved. 本书中文简体字版由Packt Publishing授权人民邮电出版社独家出版。未经出版者书面许可， 不得以任何方式复制或抄袭本书内容。 版权所有，侵权必究。 1 2 3 4 5 6 7 8 9 10 11 12 13 图灵社区会员 lemoggy(lemoggy@foxmail.com) 专享 尊重版权 

前 言 1 译 者 序 蒂姆·伯纳斯李在 1991 年制作并发布了第一个网站，如今刚刚过去 21 个年头。在这 21 年里，计算机和互联网快速发展，这个世界的面貌也日新月异。在这个过程中，网页设 计从无到有，从简单渐至专业，从可有可无变为广受关注。网页设计方法也在跟随时代 不断创新，从最初简单的文字排版，到表格布局，再到 DIV+CSS，直到现在广为流行的 网格布局、流式布局等，设计师和开发者们一直致力于为全球网民提供更好的设计观感 和使用体验。 iOS 和 Android 的发布，掀起了移动互联网的浪潮，智能手机、平板电脑、智能家电等新 设备层出不穷，我们的世界变得更加精彩纷呈。但这却给网页设计带来了新的挑战，在 面对形形色色的终端设备、千差万别的屏幕分辨率，以及良莠不齐的网络连接质量时， 目前的设计方法显得力不从心。我们无法预料用户的设备和网络状况，更不可能为每种 设备专门设计一套网站，那么在移动互联网时代，如何创新为用户提供更好的设计和体 验呢？ 2010 年 5 月 25 日，伊桑·马科特发表在 A List Apart 上的一篇文章，为我们打开了思路。 在这篇名为《Responsive Web Design》的文章中，伊桑·马科特将三种已有的技术整合在 一起，提出了响应式网页设计的概念，用以解决我们当前遇到的设计难题。响应式网页 设计概念一经提出就大受欢迎（当然也有争议），很多设计师和开发者纷纷实践并完善这 种理念。两年多的时间里，涌现出了越来越多的响应式网站，针对响应式设计的工具和 资源也日渐丰富。截至目前，响应式设计是使用一套代码为各类设备提供良好设计效果 和使用体验的最佳设计方法。 你肯定对响应式设计有所耳闻，也可能看过一些响应式设计的技巧或相关文章，但它们 都零零散散不成体系，无法让你真正理解并掌握响应式设计，也无法指导你立即开始响 应式设计的实践。这本书将会带你系统地学习响应式网页设计的方法论，书中涵盖了响 应式设计的思想、方法、工具、技巧、HTML5、CSS3、相关资源，以及针对老版本浏览 器的兼容方案等内容，并以实际案例循序渐进地讲解了如何创建一个优雅高效易于维护 的响应式网站。希望这些正是你所需要的。 图灵社区会员 lemoggy(lemoggy@foxmail.com) 专享 尊重版权 1 2 3 4 5 6 7 8 9 

2 译者序 “得功有法，秉一应万”，这是太极拳修炼的目标，我想也可以作为响应式设计的目标。 修炼好响应式设计这门功夫，能够让你安然自在，以一应万。元芳，潜心修炼吧！ 感谢裕波、杨海玲老师及朱巍老师，让我有机会翻译本书。非常感谢图灵各位编辑的辛 勤工作，尤其感谢李松峰老师的细心指导。另外要感谢图灵社区，我在这里受益匪浅。 最后，感谢我的老婆，本书的翻译离不开她的支持、监督与参谋。 我在翻译本书时尽力保证信与达，雅则不敢奢望。翻译中的错误在所难免，欢迎广大读 者指正。如果对本书有任何意见、建议或想法，请发送邮件至 wyqbailey@gmail.com 或反 馈至图灵社区。 王永强 2012 年 10 月 成都 图灵社区会员 lemoggy(lemoggy@foxmail.com) 专享 尊重版权 

前 言 1 前 言 如果你想给自己的网站做一个单独的“手机版”，请三思而后行！响应式网页设计提供了 一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设 备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提 供最佳的浏览体验。 本书提供了一整套方法，用来将一个现有的固定宽度的网站设计变成响应式的。此外， 本书应用 HTML5 和 CSS3 提供的最新最有用的技术，扩展了响应式网页设计的方法论， 以便网站更简洁、更易于维护。本书还讲解了编写和发布代码、图片、文件的最佳实践。 只要你懂 HTML 和 CSS，你就能制作响应式网站。 本书内容 第 1 章，HTML5、CSS3 及响应式设计入门，定义了什么是响应式网页设计，展示了一些 响应式设计的网站示例，重点强调了使用 HTML5 和 CSS3 的优势。 第 2 章，媒体查询：支持不同的视口，讲解了什么是媒体查询，如何实现媒体查询，以 及如何针对设备能力匹配 CSS 样式，将其应用于任意设计。 第 3 章，拥抱流式布局，讲解了流式布局的优点，以及如何将一个现有的固定宽度设计 轻松地转换为流式布局，怎样使用 CSS 框架快速搭建响应式网页。 第 4 章，响应式设计中的 HTML5，探讨了使用 HTML5 技术的诸多好处，比如更简洁的 代码、语义化标签、离线存储，以及无障碍网页应用辅助技术。 第 5 章，CSS3：选择器、字体和颜色模式，展示了 CSS3 选择器的强大威力，可以让你 轻松地指定和改变任何元素。还讲解了通过@font-face 声明来使用漂亮的网络字体，另外 讲解了新的 CSS3 颜色模式如 RGB(A)和 HSL(A)。 第 6 章，用 CSS3 创造令人惊艳的美，展示了如何使用纯粹的 CSS3 代码实现文字阴影、 盒阴影和渐变效果。还涵盖了如何使用多重背景图片，以及如何通过字体文件创建图标。 第 7 章，CSS3 的过渡、变形和动画，讲解如何仅使用 CSS3 来创建和转换屏幕上的元素， 图灵社区会员 lemoggy(lemoggy@foxmail.com) 专享 尊重版权 1 2 3 4 5 6 7 8 9