响应式 Web 设计 HTML5 和 CSS3 实战

🌙

手机阅读

本文目录结构

编辑推荐

适读人群：所有 Web 开发和设计人员。

随着移动设备的普及，用户上网的方式发生了巨大变化，无论从样式还是可用性来讲，只适合桌面显示器的网站已经过时了。如今，在设计网站的时候必须同时考虑多种屏幕尺寸和用户体验。如果网站对你或你的客户非常重要，那么实现响应式设计就是当务之急。

“响应式和移动优先”的设计理念，可以确保无论使用什么设备都可以正常访问你的网站。在这一理念的指导下，本书围绕实战案例，全面讲解了与响应式设计相关的现代 Web 技术，堪称一部“响应式设计大全”。

这一版根据新的 Web 设计趋势进行了更新，展示了实现现代响应式设计有效的方式，涵盖了创建响应式设计所必需的全部新技术和工具。掌握了这些内容，你设计的网站不仅可以适应当下，更可以顺应未来。

理解响应式设计，以及为何它对现代 Web 设计如此重要
清晰、高效地编写富有语义的 HTML5 标记
使用 CSS3 媒体查询基于设备应用不同的样式，了解媒体查询的新进展
根据不同的屏幕大小、分辨率和使用环境加载不同的图片
掌握表单处理，使用 HTML5 标记添加日期选择器、范围滑块等交互控件
在响应式设计里使用 SVG 提供分辨率无关的图片，修改 SVG 并添加动画效果
使用 CSS 新的特性，如自定义字体、nth-child 选择符、自定义属性及 CSS calc

内容简介

本书将当前 Web 设计中热门的响应式设计技术与 HTML5 和 CSS3 结合起来，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。书中不仅讨论了媒体查询、弹性布局、响应式图片，更将新的和有用的 HTML5 和 CSS3 技术一并讲解，是学习新 Web 设计技术不可多得的佳作。

作者简介

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

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

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

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　向标签致敬　66
4．4　HTML5 的新语义元素　67
4．4．1
元素　67
4．4．2
元素　68
4．4．3
元素　68
4．4．4
元素　68
4．4．5
元素　69
4．4．6
和
元素　69
4．4．7　和
元素　69
4．4．8
元素　71
4．4．9
元素　71
4．4．10
元素　71
4．4．11　h1 到 h6　72
4．5　HTML5 文本级元素　72
4．5．1　元素　72
4．5．2　元素　73
4．5．3　元素　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