响应式Web设计

作者简介：

Ben Frain

Web开发者、图书作者、演讲者。从1996年开始从事Web设计与开发，目前是Bet365的高级前端工程师。另著有《Sass和Compass设计师指南》。

在从事Web开发之前，他曾是一名怀才不遇的（而且谦虚的）电视演员和科技记者，毕业于索尔福德大学媒体与表演专业。他写过四部（自认为）均被低估的剧本，且至今仍觉得有望卖出其中一部（尽管不像最初那么有信心了）。

工作之余，在身体和妻子都允许的情况下，他会玩一玩室内足球，或者跟两个儿子练练摔跤。个人网站www.benfrain.com，Twitter账号@benfrain。

译者简介：

本书译者均来自由月影领衔的奇虎360最大前端团队——奇舞团（75team）。

李松峰

资深技术翻译，译有《JavaScript高级程序设计》《简约至上：交互式设计四策略》等数十部技术和设计书籍...

(展开全部)

作者简介：

Ben Frain

Web开发者、图书作者、演讲者。从1996年开始从事Web设计与开发，目前是Bet365的高级前端工程师。另著有《Sass和Compass设计师指南》。

在从事Web开发之前，他曾是一名怀才不遇的（而且谦虚的）电视演员和科技记者，毕业于索尔福德大学媒体与表演专业。他写过四部（自认为）均被低估的剧本，且至今仍觉得有望卖出其中一部（尽管不像最初那么有信心了）。

工作之余，在身体和妻子都允许的情况下，他会玩一玩室内足球，或者跟两个儿子练练摔跤。个人网站www.benfrain.com，Twitter账号@benfrain。

译者简介：

本书译者均来自由月影领衔的奇虎360最大前端团队——奇舞团（75team）。

李松峰

资深技术翻译，译有《JavaScript高级程序设计》《简约至上：交互式设计四策略》等数十部技术和设计书籍，现为“奇舞团”高级开发工程师、《奇舞周刊》总编。

钟恒

360奇舞团前端工程师。

第1章　响应式Web设计基础　　1
1.1　定义需求　　1
1.2　什么是响应式Web设计　　2
1.3　浏览器支持　　2
1.4　第一个响应式的例子　　4
1.4.1　HTML　　5
· · · · · · (更多)

第1章　响应式Web设计基础　　1
1.1　定义需求　　1
1.2　什么是响应式Web设计　　2
1.3　浏览器支持　　2
1.4　第一个响应式的例子　　4
1.4.1　HTML　　5
1.4.2　图片　　8
1.4.3　媒体查询　　10
1.5　示例的不足之处　　14
1.6　小结　　15
第2章　媒体查询　　16
2.1　为什么响应式Web设计需要媒体查询　　17
2.2　媒体查询的语法　　18
2.3　组合媒体查询　　19
2.3.1　@import与媒体查询　　20
2.3.2　在CSS中使用媒体查询　　20
2.3.3　媒体查询可以测试哪些特性　　20
2.4　通过媒体查询修改设计　　21
2.4.1　任何CSS都可以放在媒体查询里　　23
2.4.2　针对高分辨率设备的媒体查询　　23
2.5　组织和编写媒体查询的注意事项　　24
2.5.1　使用媒体查询链接不同的CSS文件　　24
2.5.2　分隔媒体查询的利弊　　25
2.5.3　把媒体查询写在常规样式表中　　25
2.6　组合媒体查询还是把它们写在需要的地方　　25
2.7　关于视口的meta标签　　27
2.8　媒体查询4级　　28
2.8.1　可编程的媒体特性　　29
2.8.2　交互媒体特性　　30
2.8.3　悬停媒体特性　　30
2.8.4　环境媒体特性　　31
2.9　小结　　31
第3章　弹性布局与响应式图片　　32
3.1　将固定像素大小转换为弹性比例大小　　33
3.1.1　为什么需要Flexbox　　36
3.1.2　行内块与空白　　37
3.1.3　浮动　　37
3.1.4　表格与表元　　37
3.2　Flexbox概述　　38
3.2.1　Flexbox三级跳　　38
3.2.2　浏览器对Flexbox的支持　　38
3.3　使用Flexbox　　39
3.3.1　完美垂直居中文本　　40
3.3.2　偏移　　41
3.3.3　反序　　42
3.3.4　不同媒体查询中的不同Flexbox布局　　43
3.3.5　行内伸缩　　44
3.3.6　Flexbox的对齐　　45
3.3.7　flex　　50
3.3.8　简单的粘附页脚　　52
3.3.9　改变原始次序　　53
3.3.10　Flexbox小结　　57
3.4　响应式图片　　58
3.4.1　响应式图片的固有问题　　58
3.4.2　通过srcset切换分辨率　　59
3.4.3　srcset及sizes联合切换　　59
3.4.4　picture元素　　60
3.5　小结　　61
第4章　HTML5与响应式Web设计　　62
4.1　得到普遍支持的HTML5标记　　63
4.2　开始写HTML5网页　　63
4.2.1　doctype　　64
4.2.2　HTML标签与lang属性　　64
4.2.3　指定替代语言　　64
4.2.4　字符编码　　64
4.3　宽容的HTML5　　65
4.3.1　理性编写HTML5　　66
4.3.2　向<a>标签致敬　　66
4.4　HTML5的新语义元素　　67
4.4.1　<main>元素　　67
4.4.2　<section>元素　　68
4.4.3　<nav>元素　　68
4.4.4　<article>元素　　68
4.4.5　<aside>元素　　69
4.4.6　<figure>和<figcaption>元素　　69
4.4.7　<detail>和<summary>元素　　69
4.4.8　<header>元素　　71
4.4.9　<footer>元素　　71
4.4.10　<address>元素　　71
4.4.11　h1到h6　　72
4.5　HTML5文本级元素　　72
4.5.1　<b>元素　　72
4.5.2　<em>元素　　73
4.5.3　<i>元素　　73
4.6　作废的HTML特性　　73
4.7　使用HTML5元素　　74
4.8　WCAG和WAI-ARIA　　75
4.8.1　WCAG　　75
4.8.2　WAI-ARIA　　75
4.8.3　如果你只能记住一件事　　76
4.8.4　ARIA的更多用途　　76
4.9　在HTML5中嵌入媒体　　77
4.9.1　使用HTML5视频和音频　　77
4.9.2　audio与video几乎一样　　79
4.10　响应式HTML5视频与内嵌框架　　79
4.11　关于“离线优先”　　80
4.12　小结　　81
第5章　CSS3新特性　　82
5.1　没人无所不知　　82
5.2　剖析CSS规则　　83
5.3　便捷的CSS技巧　　83
5.4　断字　　86
5.4.1　截短文本　　86
5.4.2　创建水平滚动面板　　87
5.5　在CSS中创建分支　　89
5.5.1　特性查询　　89
5.5.2　组合条件　　90
5.5.3　Modernizr　　91
5.6　新CSS3选择符　　93
5.6.1　CSS3属性选择符　　93
5.6.2　CSS3子字符串匹配属性选择符　　93
5.6.3　属性选择符的注意事项　　95
5.6.4　属性选择符选择以数值开头的ID和类　　96
5.7　CSS3结构化伪类　　96
5.7.1　:last-child　　96
5.7.2　nth-child　　97
5.7.3　理解nth　　97
5.7.4　基于nth的选择与响应式设计　　100
5.7.5　:not　　102
5.7.6　:empty　　103
5.7.7　:first-line　　104
5.8　CSS自定义属性和变量　　104
5.9　CSS calc　　105
5.10　CSS Level 4选择符　　105
5.10.1　:has伪类　　105
5.10.2　相对视口的长度　　106
5.11　Web排版　　106
5.11.1　@font-face　　107
5.11.2　通过@font-face实现Web字体　　107
5.11.3　注意事项　　109
5.12　CSS3的新颜色格式及透明度　　109
5.12.1　RGB　　109
5.12.2　HSL　　110
5.12.3　alpha通道　　111
5.12.4　CSS Color Module Level 4的颜色操作　　112
5.13　小结　　112
第6章　CSS3高级技术　　113
6.1　CSS3的文字阴影特效　　113
6.1.1　省略blur值　　114
6.1.2　多文字阴影　　115
6.2　盒阴影　　115
6.2.1　内阴影　　115
6.2.2　多重阴影　　116
6.2.3　阴影尺寸　　116
6.3　背景渐变　　117
6.3.1　线性渐变语法　　118
6.3.2　径向渐变背景　　120
6.3.3　为响应式而生的关键字　　120
6.4　重复渐变　　121
6.5　使用渐变背景创造图案　　122
6.6　多张背景图片　　123
6.6.1　背景大小　　124
6.6.2　背景位置　　124
6.6.3　背景属性的缩写　　125
6.7　高分辨率背景图像　　126
6.8　CSS滤镜　　126
6.8.1　可用的CSS滤镜　　127
6.8.2　使用多个CSS滤镜　　132
6.9　CSS性能的警告　　132
6.10　小结　　134
第7章　SVG与响应式Web设计　　135
7.1　SVG的历史　　137
7.2　用文档表示的图像　　137
7.2.1　SVG的根元素　　138
7.2.2　命名空间　　139
7.2.3　标题和描述标签　　139
7.2.4　defs标签　　139
7.2.5　元素g　　140
7.2.6　SVG形状元素　　140
7.2.7　SVG路径　　140
7.3　使用流行的图像编辑工具和服务创建SVG　　140
7.4　在Web页面中插入SVG　　142
7.4.1　使用img标签　　142
7.4.2　使用object标签　　142
7.4.3　把SVG作为背景图像插入　　143
7.4.4　关于data URI的简短介绍　　144
7.4.5　生成图像精灵　　145
7.5　内联SVG　　145
7.5.1　利用符号复用图形对象　　146
7.5.2　根据上下文改变内联SVG颜色　　147
7.5.3　复用外部图形对象资源　　148
7.6　不同插入方式下可以使用的功能　　149
7.7　SVG的怪癖　　150
7.7.1　SMIL动画　　150
7.7.2　使用外部样式表为SVG添加样式　　152
7.7.3　使用内联样式为SVG添加样式　　152
7.7.4　用CSS为SVG添加动画　　153
7.8　使用JavaScript添加SVG动画　　154
7.9　优化SVG　　156
7.10　把SVG作为滤镜　　157
7.11　SVG中媒体查询的注意事项　　159
7.11.1　实现技巧　　160
7.11.2　更多资料　　160
7.12　小结　　161
第8章　CSS3过渡、变形和动画　　162
8.1　什么是CSS3过渡以及如何使用它　　162
8.1.1　过渡相关的属性　　164
8.1.2　过渡的简写语法　　165
8.1.3　在不同时间段内过渡不同属性　　165
8.1.4　理解过渡调速函数　　166
8.1.5　响应式网站中的有趣过渡　　167
8.2　CSS的2D变形　　167
8.2.1　scale　　168
8.2.2　translate　　168
8.2.3　rotate　　171
8.2.4　skew　　171
8.2.5　matrix　　172
8.2.6　transform-origin属性　　173
8.3　CSS3的3D变形　　174
8.4　CSS3动画效果　　180
8.5　小结　　183
第9章　表单　　184
9.1　HTML5表单　　184
9.2　理解HTML5表单中的元素　　185
9.2.1　placeholder　　186
9.2.2　required　　186
9.2.3　autofocus　　187
9.2.4　autocomplete　　188
9.2.5　list及对应的datalist元素　　188
9.3　HTML5的新输入类型　　190
9.3.1　email　　190
9.3.2　number　　191
9.3.3　url　　192
9.3.4　tel　　193
9.3.5　search　　194
9.3.6　pattern　　195
9.3.7　color　　196
9.3.8　日期和时间输入类型　　196
9.3.9　范围值　　198
9.4　如何给不支持新特性的浏览器打补丁　　199
9.5　使用CSS美化HTML5表单　　200
9.5.1　显示必填项　　202
9.5.2　创造一个背景填充效果　　204
9.6　小结　　205
第10章　实现响应式Web设计　　206
10.1　尽快让设计在浏览器和真实设备上运行起来　　207
10.2　在真实设备上观察和使用设计　　207
10.3　拥抱渐进增强　　208
10.4　确定需要支持的浏览器　　209
10.4.1　等价的功能，而不是等价的外观　　209
10.4.2　选择要支持的浏览器　　209
10.5　分层的用户体验　　210
10.6　将CSS断点与JavaScript联系起来　　211
10.7　避免在生产中使用CSS框架　　212
10.8　采用务实的解决方案　　213
10.9　尽可能使用最简单的代码　　215
10.10　根据视口隐藏、展示和加载内容　　215
10.11　验证器和代码检测工具　　217
10.12　性能　　218
10.13　下一个划时代的产物　　219
10.14　小结　　219
· · · · · · (收起)

响应式Web设计是一种统一的解决方案，可以让Web作品适配手机、平板和桌面电脑。响应式的网站可以适应用户的屏幕大小，为今天和明天的设备都提供最佳用户体验。 本书涵盖响应式Web设计的所有相关内容。不仅如此，通过介绍最新和最有用的HTML5和CSS3技术，还扩充了响应式设计的方法库，让设计变得更简单，更好维护。此外，本书还讨论了编写和交付代码、图片、文件的最佳实践。 只要会用HT...

• 前　　言
• 第一章：响应式Web设计基础