响应式Web设计
2013-1
人民邮电出版社
Ben Frain
231
360000
王永强
无
如果你想给自己的网站做一个单独的“手机版”，请三思而后行！响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提供最佳的浏览体验。 本书提供了一整套方法，用来将一个现有的固定宽度的网站设计变成响应式的。此外，本书应用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来创建和转换屏幕上的元素，并制作动画效果。 第8章，用HTML5和CSS3征服表单，阐述了在所有设备上（从最新的智能手机到桌面版浏览器）都能良好运行的跨浏览器表单开发技巧。 第9章，解决跨浏览器问题，讲解了如何保证老版本的Internet Explorer可响应，如何将一组链接修改成移动设备上的一个菜单，如何为高分辨率显示器提供不同内容，以及如何使用Modernizr框架分条件地加载资源文件。 准备工作 你必须对HTML和CSS很熟悉。有一点JavaScript基础会很有帮助。良好的电影品味也很有益处。 本书读者 你是否正在开发两套网站，一套给移动设备，一套给大显示器？又或者你已听说过“响应式网页设计”但却不确定如何将HTML5、CSS3和响应式设计融合在一起？如果是，那么本书可以让你在所有竞争对手之前，将你的网站提升到一个更高层次。 本书面向那些正在使用HTML 4.01和CSS 2.1开发固定宽度网站的网页设计师和开发人员，讲解了如何使用HTML5和CSS3制作可适应任意屏幕尺寸设备的响应式网站。 本书约定 本书中使用几种不同的文字样式来区分不同类型的信息，具体约定如下。 正文中的代码使用如下格式： “HTML5接受宽松语法，例如 这样的语句也是有效的。” 代码段使用如下格式： …… 新术语，以及重要词汇也使用粗体。文中提到的那些菜单、对话框中的文字，会使用粗体或大写来标注，如：“导航按钮不再做背景色切换，内容区的THESE SHOULD HAVE WON按钮和侧边栏的详细信息按钮消失了，而字体也与设计文档相差甚远。” 这个图标表示警告或重要提醒。 这个图标表示提示或技巧。 读者反馈 我们时刻欢迎你的反馈，以便了解你对本书的看法。你的宝贵意见有助于我们提升书籍的质量。 一般的阅读反馈，可直接发送电子邮件，请在邮件标题中注明书名。 如果你在某个领域内有专长且有兴趣编写相关书籍，请访问网站查看作者指南。 客户支持 现在你已是Packt图书的尊贵读者了，我们有一系列的售后支持，保证你的消费物有所值。 错误 尽管我们已经对书籍作了仔细校对以保证内容准确，但错误在所难免。如果在书中发现任何的文字或代码错误，非常欢迎你将这些错误提交给我们，这样可以帮助我们在后续版本中改正错误，避免其他读者产生不必要的误解。一旦发现错误，请登录网站，选择书名，点击errata submission form（提交勘误）链接，然后填写具体的错误信息即可。只要你提交的勘误通过验证，勘误信息就会上传到我们的网站，或者追加到已有勘误列表中，显示在该书的勘误页面 。 盗版 对所有媒体来说，互联网盗版都是一个棘手的问题。Packt很重视版权保护。如果你在互联网上发现我们公司出版物的任何非法复制品，请及时告知我们相关网址或网站名称，以便我们采取补救措施。 如果发现可疑盗版材料，请通过网站联系我们。对您帮助我们保护作者权益、确保我们持续提供高品质图书的行为表示敬意。 问题 如果你对本书有任何问题，请联系我们，我们会尽力解决。
移动互联网时代到来了。《响应式Web设计：HTML5和CSS3实战》将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。不仅讨论了媒体查询、流式布局、相对字体、响应式媒体，更将HTML5和CSS3的相关知识点一并讲解，是学习最新Web设计技术不可多得的佳作。
《响应式Web设计：HTML5和CSS3实战》适合各个层次的Web开发和设计人员阅读。
Ben
Frain是一名具有十多年经验的网页设计师和前端工程师，直接与世界各地的客户和设计机构并肩工作。同时他还是一名技术记者，定期为一些关注Mac平台、前沿科技、网页设计和航空技术的刊物撰稿。在此之前，他曾是一名怀才不遇的（而且谦虚谨慎的）电视演员，毕业于索尔福德大学的媒体与表演专业。他写了四部（自认为）同样被低估的剧本，而且始终心怀能卖出一部的信念（尽管不像最初那么强烈了）。工作之余，在身体（和妻子）允许的情况下，他喜欢玩室内足球。
第1章 HTML5、CSS3及响应式设计入门
1.1 为什么智能手机很重要（而老版的IE不再重要）
1.2 响应式设计一定是最佳选择吗
1.3 响应式网页设计的定义
1.4 为什么要在响应式设计上停滞不前
1.5 响应式网页设计示例
1.5.1 下载视口调试工具
1.5.2 在线创意源泉
1.6 为什么HTML5很优秀
1.6.1 省时省力
1.6.2 新增了语义化标签元素
1.7 CSS3为响应式设计和更多创新奠定了基础
1.7.1 底线：CSS3不破坏任何东西
1.7.2 CSS3如何解决日常设计问题
1.8 看呐，不用图片
1.9 HTML5和CSS3现在就能用吗
1.10 响应式网页设计不是灵丹妙药
1.11 引导客户：网站不必在所有浏览器中表现一致
1.12 小结
第2章 媒体查询：支持不同的视口
2.1 现在就能使用媒体查询
2.2 为什么响应式设计需要媒体查询
2.2.1 媒体查询语法
2.2.2 媒体查询能检测那些特性
2.2.3 用媒体查询改造我们的设计
2.2.4 加载媒体查询的最佳方法
2.3 我们的第一个响应式设计
2.3.1 我们的设计是固定宽度的，不要惊讶
2.3.2 响应式设计中要保证图片尽可能精简
2.3.3 小视口下的内容剪切
2.4 阻止移动浏览器自动调整页面大小
2.5 针对不同视口宽度修正设计
2.6 响应式设计中内容始终优先
2.7 媒体查询只是必要条件之一
2.8 小结
第3章 拥抱流式布局
3.1 固定布局经不起未来考验
3.2 为什么响应式设计需要百分比布局
3.3 将网页从固定布局修改为百分比布局
3.3.1 需要牢记的公式
3.3.2 设置百分比元素的上下文
3.3.3 必须时刻牢记上下文
3.4 用em替换px
3.5 弹性图片
3.5.1 让图片随视口缩放
3.5.2 为特定图片指定特定规则
3.5.3 给弹性图片设置阈值
3.5.4 超级全能的max-width属性
3.6 为不同的屏幕尺寸提供不同的图片
3.7 流动网格布局和媒体查询的默契配合
3.8 CSS网格系统
3.9 小结
第4章 响应式设计中的HTML5
4.1 HTML5的哪些部分现在就能用
4.1.1 大多数网站可以用HTML5编写
4.1.2 腻子脚本和Modernizr
4.2 如何编写HTML5网页
4.2.1 HTML5的精简之道
4.2.2 HTML5标签的合理写法
4.2.3 伟大的标签万岁
4.2.4 HTML的废弃零件
4.3 HTML5的全新语义化元素
……
第5章 CSS3：选择器、字体和颜色模式
5.1 CSS3给前端开发人员带来了什么
5.1.1 Internet Explorer 6到8对CSS3的支持
5.1.2 使用CSS3设计和开发页面
5.2 CSS规则解析
5.3 私有前缀及其用法
5.4 快速而有效的CSS技巧
5.4.1 CSS3多栏布局
5.4.2 文字换行
5.5 CSS3的新增选择器及其用法
5.5.1 CSS3属性选择器
5.5.2 CSS3结构伪类
5.5.3 对伪元素的修正
5.6 自定义网页字体
5.6.1 @font-face规则
5.6.2 使用@font-face嵌入网页字体
5.7 帮帮我，标题模糊怎么办
5.8 新的CSS3颜色格式和透明度
5.8.1 RGB颜色
5.8.2 HSL颜色
5.8.3 针对IE6、IE7和IE8提供备用颜色值
5.8.4 透明通道
5.9 小结
第6章 用CSS3创造令人惊艳的美
6.1 文字阴影
6.1.1 HEX、HSL或RGB颜色都可以
6.1.2 px、em或rem都行
6.1.3 取消文字阴影
6.1.4 制作浮雕文字阴影效果
6.1.5 多重文字阴影
6.2 盒阴影
6.2.1 内阴影
6.2.2 多重阴影
6.3 背景渐变
6.3.1 线性背景渐变
6.3.2 径向背景渐变
6.3.3 重复渐变
6.4 背景渐变图案
6.5 CSS3的响应性
6.6 组合使用CSS3属性
6.7 多重背景图片
6.7.1 背景图片大小
6.7.2 背景图片位置
6.7.3 背景属性的缩写语法
6.8 更多CSS特性
6.9 可缩放图标：响应式设计中的完美选择
6.10 小结
第7章 CSS3过渡、变形和动画
7.1 什么是CSS3过渡以及如何使用它
7.1.1 过渡相关的属性
7.1.2 响应式网站中的有趣过渡
7.2 CSS3的2D变形
7.3 尝试CSS3的3D变形
7.3.1 分析3D变形效果
7.3.2 3D变形尚未成熟
7.4 CSS3动画效果
7.5 小结
第8章 用HTML5和CSS3征服表单
8.1 HTML5表单
8.1.1 理解HTML5表单中的元素
8.1.2 placeholder
8.1.3 required
8.1.4 autofocus
8.1.5 autocomplete
8.1.6 list（及对应的datalist元素）
8.1.7 HTML5的新输入类型
8.1.8 日期和时间输入类型
8.2 如何给不支持新特性的浏览器打补丁
8.3 使用CSS3美化HTML5表单
8.4 小结
第9章 解决跨浏览器问题
9.1 渐进增强与优雅降级
9.2 该不该修复老版本IE
9.2.1 统计数据（再看看世界的变化）
9.2.2 个人选择
9.3 前端的瑞士军刀：Modernizr
9.3.1 使用Modernizr辅助修正样式问题
9.3.2 使用Modernizr让老版本IE支持HTML5元素
9.3.3 给IE6、7、8追加min/max媒体查询功能
9.3.4 使用Modernizr按需加载资源
9.4 必要时将导航链接转换为下拉菜单
9.5 高分辨率设备（未来趋势）
9.6 小结
版权页： 插图： 在上述所有特性中，除scan和grid之外，都可使用min和max前缀来创建一个查询范围。例如，分析如下所示的代码片段： @import url（”phone.css"） screen and （min-width:200px） and （max-width:360px）; 这里对width应用了min和max来设定查询范围。这样phone.css文件只会引入视口宽度介于200像素至360像素的显示屏设备。 2.2.3用媒体查询改造我们的设计 毫无疑问，你肯定知道CSS代表层叠样式表。所谓层叠，就是指样式表中后面的样式会覆盖前面相同的样式（除非前面的样式具有更高的针对性）。因此我们可以在样式表的开头设置基本样式，以便适应所有设计，然后使用媒体查询来进一步重写相应的部分。例如，先针对大视口设计（用户大多数情况下使用鼠标），将导航链接设计成简单的文字链接；然后再针对较小的视口，使用媒体查询重写这部分样式，为拇指一族提供更大的点击区域。 2.2.4加载媒体查询的最佳方法 现代浏览器虽然可以智能地忽略与自身不匹配的样式文件，但它却不一定不下载这些文件。因此，将不同媒体查询的样式保存到独立的文件中没有太大好处（个人喜好或为便于组织代码除外）。使用多个独立的文件会增加用于页面渲染的HTTP请求数量，从而导致页面加载变慢。 Respond.js是为Intemet Explorer 8及更低版本增加媒体查询支持的最快的JavaScript工具，但它目前无法解析CSS的@imp。rt命令。因此，建议在已有的样式表中追加媒体查询样式。使用如下语法即可在已有样式表中加入媒体查询： @media screen .and （max-width: 768px） {／*样式*／} 2.3我们的第一个响应式设计 不知道你此刻怎么想，但我热切地渴望开始设计一个响应式网页！我们已经理解了媒体查询的原理，那就让我们试着驾驭它们，看看它们在实际工作中如何发挥作用。而且我正好有用来测试的项目。下面请允许我说点题外话…… 我喜欢电影。但是，我常常发现自己和别人的观点不同（或许这就是我日复一日独居一室写代码的原因之一），尤其是关于什么是好电影什么是烂电影。每当奥斯卡奖提名宣布的时候，我经常会有一种强烈的恶心反胃感。我总觉得各种类型的电影都应获得嘉奖。
“看完这本书，我必须得说，这时间花得太值了。作者通过一个虚构的网站，让我们掌握所有细节。” “响应式Web设计具有巨大的潜在商业价值，这本书把响应式Web设计讲得非常透彻。” ——读者评论
前端设计人员必备教程 图文并茂，轻松掌握最新设计技术 全面应用HTML5和CSS3，一步跨入最前沿
无
作者通过一个Demo贯穿了响应式设计的技术要点图文并茂，并结合HTML5和CSS3现代网页标准阐述了如何开发设计适应不同设备的web。值得所有web设计和开发人员学习。
通过关于响应式web的一个案例讲解，让人理解html5+css3的魅力，个人认为未来的趋势是一个响应式web的趋势，在国内也许就是两到三年，响应式web设计会遍地开花成为一个主流趋势。
响应式Web设计：HTML5和CSS3实战这本书还是不错的！在工作上蛮有帮助！好！
本书挺适合有编写html和css基础的人，里面前几章节大部分讲的是响应式布局（流体布局），和媒体查询等，后章节就是介绍HTML5和CSS3的一些新的标签和新的css3属性
这个还讲了些css3样式效果的东西，真是多此一举。专注响应式就好了，《响应式Web设计实践》要专业好多
今天这本书刚到。就迫不及待的打开了。之前有读过《HTML5与CSS3权威指南》那个书。对HTML5和CSS3有了一定的了解。这回再看到这本书简直是爱不释手。读起来很有意思，第一章介绍大体是说了一些好处以及举了一些网站例子。打开看了，真的很棒的网站，动画很好看做的。很难想象这是纯css3做的。后面的章节围绕制作一个网站来叙述。从HTML到CSS3，同时也包含了网页制作的整个流程，设计思想。强烈推荐！
通过实例学习了响应式设计的全过程，但是缺乏步骤式的循序渐进的代码，希望能够将代码细分，从无到有搭建一个响应式的web网站
html5+css3不流，前端的朋友要掌握，很不错建议阅读
很喜欢这种提出问题-解决问题的讲解方式，如果没有html4和css2经验读起来可能有很多困惑，但是对于有经验的人来说用这本书学习html5在合适不过了。看到58页，代码大概有三四出错误，但不影响阅读。
响应式网页经验谈，有点基础和实战经验感悟更深
如果想学习流行的响应试web技术，这本无疑是很好的书。
这个是老师推荐的，很好，通俗易懂，层层渐进，懂了html和css的人都能看得懂
不能指望这本书能教给你太多的知识，但思路很好！配合《移动应用UI设计模式》这本来思考，设计出真正响应似的软件UI来不成难事！个人觉得从开发到设计，再到决策，一干人等都应该对移动平台的界面有一个新的认识！话说，2、3个小时就能看完，全当是花钱上了节自习课了！
这本书，讲的是一个网站如何变成响应时网站的过程及其每一步要做的，如果你想做手机网站，或者是做响应时的网站，那么这本书就是你必须购买的，通俗易懂，文字有趣味，让你像看小说一样，这本书是让我对制作响应时网站，包括手机网站恍然大悟的一本书..是我非常力荐的..他是一本好书..而且绝倒的每个例子，都很好
不错的好书，没有沦落到别的书籍按着手册照搬css3属性的怪圈。难得的好书
对于向移动端开发webapp的前端人员，此书是了解一些基准和为何使用以及简单使用的不错的教程。。
建议网页设计或者做交互的看一下，很精彩
最前沿的技术，多讲一些编程的问题就更好了！！！
内容精简，前端设计师值得一看，不错~
我喜欢这种技术
学习必备 本书已撸，适合学习
应该很好，还没详细研究。不过，这方向是做网站必须的
好书，很多例子拿来就可以直接使用，解决实际工作中的问题。
嗯， 没什么说的， 案头必备的书， 想着大神之路迈进吧
很实用，喜欢，已经在学习中
好书 不可多得的好书 可惜没有关盘文件
解决了我的问题，一本好书。这次最喜欢的。
一直喜欢看完后再评价，书很好，值得拥有我推荐！
还不错，刚刚看一点，语言比较流畅，看着轻松
这老外写的书就是不赖。只是凡是进口版权的都贵了点，没办法。
它真的很好。通用语言写易懂。
大概翻了一下，写的还不错
正在读。。感觉不错，希望能学到一些东西。。
还没仔细看，大致浏览了下，对我有帮助
当当的送货速度明显快了，非常感谢！书很好，还没来及阅读，但网上评测还不错！希望能够学到点东西！
内容不错，学习的好帮手，值得推荐
看大家推荐不错，买来学习学习，送货速度神速。
内容不错，讲3的多一点，5的少一点。还是学到很多东西的，好书！
正版，很好，送货也挺快的，好评!
很好的书，很满意，很值得推荐
拓展视野~
这书很赞，简洁易懂。
还没看完，觉得这书写挺好的
非常好的一本书，包装也不错
想做自己的产品，想法很多，就是能力不足以实现，所以各方面都研究一下
书不错的，边学边练还可以
买给妹妹的朋友的，很好啊
看同事买了一本，也来看看
还没有看，给好评
里面介绍的很详细，很有用。
好书！还没仔细看，好评！
内容精简，很不错~
不错，挺有价值的。值得推荐给大家。
内容简单易懂...很不错的书
凑活吧搓火吧
还可以 值得看看
很有说服力
发货速度有待改进，同时买了两件东西，收货时间相差一个星期。不过书还是挺不错的。
书还没拆开看，看评论应该不错的！支持一个。
初步看来买得太高端了
看完继续评论
所以不能输在起跑线上
没啥玩意
正在读，今后再评价。
非常不错的小册子，一直看老外推荐这本书，中文版终于出来了。
看了一半，内容比较新颖，思路很清晰
这本书感觉非常不错哦
通俗易懂，还不错，没有很枯燥
非常需要的一本书，正在看哦！
还可以吧！！！！！
大部分内容还是HTML5与CSS3，比较简单。只是在响应式设计思想的指导下，有许多技巧调整。例子很多，有一定实用性。
之前最好懂点HTML CSS 等
全方位的介绍了响应式设计，不错的一本书，如果能多做一个或两个不同的案例就更好了
响应式方面的东西比较少，这本书只讲了一点点，但是写的比较容易懂，还算不错
入门级的书，可以对css3解惑。不过推荐直接购买《Bootstrap实战》可以更上一步。
HTML5是未来的发展趋势呀，努力学习中，内容还是比较基础的，都看的懂
看了开头感觉不错对响应试介绍的很清楚，就是能实例再多点就好了！
学技术的话，这本书写的像故事。
技术更新太快，不学就落后了。书还没看。
只看了三分之一，作者根据自己一个网站一步步的分析RWD是如何实现的~
适合有一定基础的阅读~
纯粹是跟潮流的买，希望能跟上时代
书还行吧，只是物流太慢，买了四天才到。
看了下，还不错，书薄了点，要是在厚点就好了。
物流确实太慢，等了1个星期
感觉还可以.但是内容不是很多
大概花了一个星期看完的，作者很幽默，翻译得也很好，还对作者讲得不清楚的地方做了解释。像之前不清楚section怎么用……后来看了实例之后恍然大悟。也介绍了许多好用的腻子脚本可以兼容老版ie。还介绍了常用到的css3。总体来说没有很难，只要有html和css基础都能看懂的……
这书的内容不错，适合具有一定网页设计经历的人探索。它主要讲了如何设计网页，使之适应从手机到个人电脑的各种屏幕。
其实响应式设计很简单，这本书真正将响应式设计的原理其实只有四分之一，其它都是HTML5、CSS3，同时推荐了很多很有用的在线工具，总的来说，除了有知识，还有很多有用的内容，受益匪浅
内容不一定可以用到现在项目上，在天朝这种设计理念估计没人认可，但是学习一种设计思路还是不错的。
第一次接触网页，还是十多年前，跟书上前几页讲的一样，全都是表格布局。一晃十多年，重新看网页编辑，竟然有如此大的变化。很激动。
书还可以，讲的比较切实，值得看
用knidle看完了，还可以，学到了一些东西
扫盲和工具书，值得一读
如果你对响应式设计感兴趣，可以读一读，作者详细的解读了如何通过CSS来实现不同尺寸屏幕或分辨率让Web适应并保持最佳尺寸，感觉很受启发
翻译看似带点生动的语气，但实际上里面很多句子读的不通顺。内容非常的一般，HTML5里有很多功能连概念都没有提到。 只提到一些html5的新语义和新表单内容及离线使用。CSS3的属性也只提到几个而已。媒体查询，阴影，少量的过渡，至少也介绍一个slide特效吧。连个工具书都不如。可能本书重在说响应式的设计，头3章可以一看，后面几章无视吧。
文字是很清楚。。但是代码部分啥的看不清楚。。放大字体没有用。代码那块还是一样小。小到比蚂蚁还小，而且极度不清楚
很好，一本让我从头看到尾的书，书很有难度和高度，值得好好肯，边学，边做，边感悟。
原作者很风趣，翻译得也不错。唯一缺点是该书电纸版的中的CSS样例代码很难看清楚，让人很头大。
纸张一般，能看就行。