响应式Web设计

内容简介：

随着iPad mini的发布，又一个新的屏幕尺寸诞生了。用不着全面统计，你就会发现移动互联网时代众多的屏幕规格，从智能手机的3、4、5英寸，到平板电脑的7、8、9、10英寸，再到笔记本和台式机的13至30英寸，绝非目前单一的固定或流式布局所能应付。于是，响应式设计应运而生，而且它也将成为移动互联网时代前端设计与开发人员的一门必修课。

本书堪称学习响应式Web设计的难得佳作。它不仅全面、细致、图文并茂地介绍了响应式设计相关的技术，比如媒体查询、流式布局、弹性媒体和弹性字体等，还把近几年来Web设计领域公认的最佳设计理念有机地融入到了实例当中，比如移动先行（Mobile First）、渐进增强、平稳退化、无障碍设计等。更加难得的是，本书以设计跨屏幕的网页（响应式设计）为出发点，以点带面，把如今Web设计领域两大标准的最新版本HTML5和CSS3也纳入其中，读者在掌握先进设计方法的同时也能掌握最新的设计技术（比如使用新的HTML5结构化语义标记、嵌入媒体、响应式视频，以及CSS3的新选择器、特效、过渡、变形和动画等），从而可以免除重复学习新标准之苦，让自己一步跨入Web设计领域的最前沿。无论你想学习响应式Web设计，还是学习HTML5和CSS3的实际应用，本书都能满足你的需要，是毋庸置疑的明智之选。

说到底，响应式Web设计并非一门独立的技术，而只是现有技术的一个组合应用。只要有一点HTML和CSS基础的读者都能顺利地掌握它。对于中、高级的前端设计和开发人员，翻阅本书也有助于理清自己的知识脉络，对这个新的设计理念获得更全面、深入的理解和把握。

习惯移动阅读的读者，可访问图灵社区，购买本书电子版：http://www.ituring.com.cn/book/1055

作者简介：

Ben Frain是一名具有十多年经验的网页设计师和前端工程师，直接与世界各地的客户和设计机构并肩工作。同时他还是一名技术记者，定期为一些关注Mac平台、前沿科技、网页设计和航空技术的刊物撰稿。

在此之前，他曾是一名怀才不遇的（而且谦虚谨慎的）电视演员，毕业于索尔福德大学的媒体与表演专业。他写了四部（自认为）同样被低估的剧本，而且始终心怀能卖出一部的信念（尽管不像最初那么强烈了）。

工作之余，在身体（和妻子）允许的情况下，他喜欢玩室内足球。 他的个人网站是www.benfrain.com，Twitter地址是twitter.com/benfrain。

目录：

第1章 　HTML5、CSS3及响应式设计入门1

1.1 　为什么智能手机很重要（而老版的IE不再重要）2

1.2 　响应式设计一定是最佳选择吗3

1.3 　响应式网页设计的定义3

1.4 　为什么要在响应式设计上停滞不前4

1.5 　响应式网页设计示例4

1.5.1 　下载视口调试工具4

1.5.2 　在线创意源泉11

1.6 　为什么HTML5很优秀12

1.6.1 　省时省力12

1.6.2 　新增了语义化标签元素13

1.7 　CSS3为响应式设计和更多创新奠定了基础13

1.7.1 　底线：CSS3不破坏任何东西14

1.7.2 　CSS3如何解决日常设计问题14

1.8 　看呐，不用图片17

1.9 　HTML5和CSS3现在就能用吗20

1.10 　响应式网页设计不是灵丹妙药20

1.11 　引导客户：网站不必在所有浏览器中表现一致21

1.12 　小结22

第2章 　媒体查询：支持不同的视口23

2.1 　现在就能使用媒体查询23

2.2 　为什么响应式设计需要媒体查询24

2.2.1 　媒体查询语法24

2.2.2 　 媒体查询能检测那些特性26

2.2.3 　用媒体查询改造我们的设计27

2.2.4 　加载媒体查询的最佳方法27

2.3 　我们的第一个响应式设计27

2.3.1 　我们的设计是固定宽度的，不要惊讶28

2.3.2 　响应式设计中要保证图片尽可能精简32

2.3.3 　小视口下的内容剪切33

2.4 　阻止移动浏览器自动调整页面大小34

2.5 　针对不同视口宽度修正设计37

2.6 　响应式设计中内容始终优先38

2.7 　媒体查询只是必要条件之一42

2.8 　小结42

第3章 　拥抱流式布局43

3.1 　固定布局经不起未来考验43

3.2 　为什么响应式设计需要百分比布局44

3.3 　将网页从固定布局修改为百分比布局44

3.3.1 　需要牢记的公式45

3.3.2 　设置百分比元素的上下文47

3.3.3 　必须时刻牢记上下文52

3.4 　用em替换px54

3.5 　弹性图片56

3.5.1 　让图片随视口缩放56

3.5.2 　为特定图片指定特定规则58

3.5.3 　给弹性图片设置阈值59

3.5.4 　超级全能的max-width属性61

3.6 　为不同的屏幕尺寸提供不同的图片61

3.7 　流动网格布局和媒体查询的默契配合66

3.8 　CSS网格系统66

3.9 　小结72

第4章 　响应式设计中的HTML573

4.1 　HTML5的哪些部分现在就能用73

4.1.1 　大多数网站可以用HTML5编写74

4.1.2 　腻子脚本和Modernizr74

4.2 　如何编写HTML5网页75

4.2.1 　HTML5的精简之道76

4.2.2 　HTML5标签的合理写法76

4.2.3 　伟大的<a>标签万岁77

4.2.4 　HTML的废弃零件77

4.3 　HTML5的全新语义化元素78

4.3.1 　<section>78

4.3.2 　<nav>79

4.3.3 　<article>79

4.3.4 　<aside>79

4.3.5 　<hgroup>79

4.3.6 　<header>81

4.3.7 　<footer>81

4.3.8 　<address>81

4.4 　HTML5结构元素的实际用法81

4.5 　HTML5的文本级语义元素87

4.5.1 　<b>88

4.5.2 　<em>88

4.5.3 　<i>88

4.5.4 　在页面中应用文本层语义元素88

4.6 　遵循WAI-ARIA实现无障碍站点90

4.7 　在HTML5中嵌入媒体93

4.8 　用HTML5的方法为页面添加视频或音频93

4.8.1 　提供备用的媒体源文件95

4.8.2 　针对老版本浏览器的备用方案95

4.8.3 　和标签的用法基本一致96

4.9 　响应式视频96

4.10 　离线Web应用99

4.10.1 　离线Web应用概述99

4.10.2 　让网页可离线使用99

4.10.3 　理解manifest文件100

4.10.4 　页面被自动加载到离线缓存101

4.10.5 　版本注释的用途101

4.10.6 　离线访问网站101

4.10.7 　离线Web应用的故障诊断102

4.11 　小结103

第5章 　CSS3：选择器、字体和颜色模式104

5.1 　CSS3给前端开发人员带来了什么104

5.1.1 　Internet Explorer 6到8对CSS3的支持105

5.1.2 　使用CSS3设计和开发页面105

5.2 　CSS规则解析105

5.3 　私有前缀及其用法106

5.4 　快速而有效的CSS技巧108

5.4.1 　CSS3多栏布局108

5.4.2 　文字换行110

5.5 　CSS3的新增选择器及其用法111

5.5.1 　CSS3属性选择器111

5.5.2 　CSS3结构伪类113

5.5.3 　对伪元素的修正122

5.6 　自定义网页字体123

5.6.1 　@font-face规则124

5.6.2 　使用@font-face嵌入网页字体124

5.7 　帮帮我，标题模糊怎么办127

5.8 　新的CSS3颜色格式和透明度129

5.8.1 　RGB颜色130

5.8.2 　HSL颜色131

5.8.3 　针对IE6、IE7和IE8提供备用颜色值132

5.8.4 　透明通道132

5.9 　小结134

第6章 　用CSS3创造令人惊艳的美135

6.1 　文字阴影136

6.1.1 　HEX、HSL或RGB颜色都可以136

6.1.2 　px、em或rem都行136

6.1.3 　取消文字阴影138

6.1.4 　制作浮雕文字阴影效果139

6.1.5 　多重文字阴影140

6.2 　盒阴影140

6.2.1 　内阴影141

6.2.2 　多重阴影142

6.3 　背景渐变143

6.3.1 　线性背景渐变144

6.3.2 　径向背景渐变147

6.3.3 　重复渐变149

6.4 　背景渐变图案151

6.5 　CSS3的响应性153

6.6 　组合使用CSS3属性155

6.7 　多重背景图片159

6.7.1 　背景图片大小161

6.7.2 　背景图片位置161

6.7.3 　背景属性的缩写语法161

6.8 　更多CSS特性162

6.9 　可缩放图标：响应式设计中的完美选择162

6.10 　小结163

第7章 　CSS3过渡、变形和动画164

7.1 　什么是CSS3过渡以及如何使用它164

7.1.1 　过渡相关的属性166

7.1.2 　响应式网站中的有趣过渡168

7.2 　CSS3的2D变形169

7.3 　尝试CSS3的3D变形174

7.3.1 　分析3D变形效果176

7.3.2 　3D变形尚未成熟178

7.4 　CSS3动画效果179

7.5 　小结185

第8章 　用HTML5和CSS3征服表单186

8.1 　HTML5表单186

8.1.1 　理解HTML5表单中的元素188

8.1.2 　placeholder189

8.1.3 　required189

8.1.4 　autofocus190

8.1.5 　autocomplete191

8.1.6 　list（及对应的datalist元素）191

8.1.7 　HTML5的新输入类型192

8.1.8 　日期和时间输入类型198

8.2 　如何给不支持新特性的浏览器打补丁203

8.3 　使用CSS3美化HTML5表单204

8.4 　小结210

第9章 　解决跨浏览器问题211

9.1 　渐进增强与优雅降级215

9.2 　该不该修复老版本IE216

9.2.1 　统计数据（再看看世界的变化）216

9.2.2 　个人选择216

9.3 　前端的瑞士军刀：Modernizr217

9.3.1 　使用Modernizr辅助修正样式问题219

9.3.2 　使用Modernizr让老版本IE支持HTML5元素221

9.3.3 　给IE6、7、8追加min/max媒体查询功能222

9.3.4 　使用Modernizr按需加载资源223

9.4 　必要时将导航链接转换为下拉菜单225

9.5 　高分辨率设备（未来趋势）228

9.6 　小结231

文章试读：如果你想给自己的网站做一个单独的“手机版”，请三思而后行！响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提供最佳的浏览体验。 本书提供了一整套方法，用来将一个现有的固定宽度的网站设计变成响应式的。此外，本书应用HTML5和CSS3提供的最新最有用的技术，扩展了响应式网页设计...

(查看全部试读)