目 录第 1 章 响应式 Web 设计基础 ................... 11.1 定义需求 ................................................... 11.2 什么是响应式 Web 设计 .......................... 21.3 浏览器支持 ............................................... 21.4 第一个响应式的例子 ................................ 41.4.1 HTML ........................................... 51.4.2 图片 ............................................... 81.4.3 媒体查询 ...................................... 101.5 示例的不足之处 ...................................... 141.6 小结 ......................................................... 15第 2 章 媒体查询 ........................................ 162.1 为什么响应式 Web 设计需要媒体查询.......................................................... 172.2 媒体查询的语法 ...................................... 182.3 组合媒体查询 .......................................... 192.3.1 @import 与媒体查询 .................. 202.3.2 在 CSS 中使用媒体查询 .............. 202.3.3 媒体查询可以测试哪些特性 ........ 202.4 通过媒体查询修改设计 ........................... 212.4.1 任何 CSS 都可以放在媒体查询里 .......................................... 232.4.2 针对高分辨率设备的媒体查询 .............................................. 232.5 组织和编写媒体查询的注意事项 ............ 242.5.1 使用媒体查询链接不同的 CSS文件 .............................................. 242.5.2 分隔媒体查询的利弊 ................... 252.5.3 把媒体查询写在常规样式表中 .... 252.6 组合媒体查询还是把它们写在需要的地方.......................................................... 252.7 关于视口的 meta 标签 ........................... 272.8 媒体查询 4 级 .......................................... 282.8.1 可编程的媒体特性 ....................... 292.8.2 交互媒体特性 .............................. 302.8.3 悬停媒体特性 .............................. 302.8.4 环境媒体特性 .............................. 312.9 小结 ......................................................... 31第 3 章 弹性布局与响应式图片 ................. 323.1 将固定像素大小转换为弹性比例大小 .... 333.1.1 为什么需要 Flexbox .................... 363.1.2 行内块与空白 .............................. 373.1.3 浮动.............................................. 373.1.4 表格与表元 .................................. 373.2 Flexbox 概述 ............................................ 383.2.1 Flexbox 三级跳 ............................ 383.2.2 浏览器对 Flexbox 的支持 ............ 383.3 使用 Flexbox ........................................... 393.3.1 完美垂直居中文本 ....................... 403.3.2 偏移.............................................. 413.3.3 反序.............................................. 423.3.4 不同媒体查询中的不同Flexbox 布局 ................................ 433.3.5 行内伸缩 ...................................... 443.3.6 Flexbox 的对齐 ............................ 453.3.7 flex ............................................ 503.3.8 简单的粘附页脚 .......................... 523.3.9 改变原始次序 .............................. 533.3.10 Flexbox 小结 .............................. 573.4 响应式图片 .............................................. 583.4.1 响应式图片的固有问题 ............... 582 目 录3.4.2 通过 srcset 切换分辨率 ........... 593.4.3 srcset 及 sizes 联合切换 ....... 593.4.4 picture 元素 ............................. 603.5 小结 ......................................................... 61第 4 章 HTML5 与响应式 Web 设计 ........ 624.1 得到普遍支持的 HTML5 标记 ................ 634.2 开始写 HTML5 网页 ............................... 634.2.1 doctype ...................................... 644.2.2 HTML 标签与 lang 属性 ............ 644.2.3 指定替代语言 .............................. 644.2.4 字符编码 ...................................... 644.3 宽容的 HTML5 ....................................... 654.3.1 理性编写 HTML5 ........................ 664.3.2 向<a>标签致敬 ........................... 664.4 HTML5 的新语义元素 ............................ 674.4.1 <main>元素 ................................ 674.4.2 <section>元素 .......................... 684.4.3 <nav>元素................................... 684.4.4 <article>元素 .......................... 684.4.5 <aside>元素 .............................. 694.4.6 <figure>和<figcaption>元素 ............................................. 694.4.7 <detail>和<summary>元素 .... 694.4.8 <header>元素 ............................ 714.4.9 <footer>元素 ............................ 714.4.10 <address>元素 ........................ 714.4.11 h1 到 h6 ..................................... 724.5 HTML5 文本级元素 ................................ 724.5.1 <b>元素 ....................................... 724.5.2 <em>元素 ..................................... 734.5.3 <i>元素 ....................................... 734.6 作废的 HTML 特性 ................................. 734.7 使用 HTML5 元素 ................................... 744.8 WCAG 和 WAI-ARIA ............................. 754.8.1 WCAG ......................................... 754.8.2 WAI-ARIA ................................... 754.8.3 如果你只能记住一件事 ............... 764.8.4 ARIA 的更多用途 ........................ 764.9 在 HTML5 中嵌入媒体 ........................... 774.9.1 使用 HTML5 视频和音频 .......... 774.9.2 audio 与 video 几乎一样 ....... 794.10 响应式 HTML5 视频与内嵌框架 .......... 794.11 关于“离线优先” ................................ 804.12 小结 ....................................................... 81第 5 章 CSS3 新特性 .............................. 825.1 没人无所不知 .......................................... 825.2 剖析 CSS 规则 ......................................... 835.3 便捷的 CSS 技巧 ..................................... 835.4 断字 ......................................................... 865.4.1 截短文本 ...................................... 865.4.2 创建水平滚动面板 ...................... 875.5 在 CSS 中创建分支 ................................. 895.5.1 特性查询 ...................................... 895.5.2 组合条件 ...................................... 905.5.3 Modernizr .................................... 915.6 新 CSS3 选择符 ....................................... 935.6.1 CSS3 属性选择符 ........................ 935.6.2 CSS3 子字符串匹配属性选择符 ......................................... 935.6.3 属性选择符的注意事项 ............... 955.6.4 属性选择符选择以数值开头的ID 和类 ........................................ 965.7 CSS3 结构化伪类 .................................... 965.7.1 :last-child ............................. 965.7.2 nth-child ................................. 975.7.3 理解 nth ...................................... 975.7.4 基于 nth 的选择与响应式设计 ........................................... 1005.7.5 :not .......................................... 1025.7.6 :empty ...................................... 1035.7.7 :first-line ........................... 1045.8 CSS 自定义属性和变量 ........................ 1045.9 CSS calc .............................................. 1055.10 CSS Level 4 选择符 ............................. 1055.10.1 :has 伪类 .............................. 1055.10.2 相对视口的长度 .................... 1065.11 Web 排版 ............................................. 1065.11.1 @font-face ......................... 107目 录 3234567891011121314151618175.11.2 通过@font-face 实现 Web字体 ........................................ 1075.11.3 注意事项 ................................ 1095.12 CSS3 的新颜色格式及透明度 ............. 1095.12.1 RGB ........................................ 1095.12.2 HSL ........................................ 1105.12.3 alpha 通道 ............................... 1115.12.4 CSS Color Module Level 4的颜色操作 ............................ 1125.13 小结 ..................................................... 112第 6 章 CSS3 高级技术 ........................... 1136.1 CSS3 的文字阴影特效 ........................... 1136.1.1 省略 blur 值 ................................ 1146.1.2 多文字阴影 ................................ 1156.2 盒阴影 .................................................... 1156.2.1 内阴影 ........................................ 1156.2.2 多重阴影 .................................... 1166.2.3 阴影尺寸 .................................... 1166.3 背景渐变 ................................................ 1176.3.1 线性渐变语法 ............................ 1186.3.2 径向渐变背景 ............................ 1206.3.3 为响应式而生的关键字 ............. 1206.4 重复渐变 ................................................ 1216.5 使用渐变背景创造图案 ......................... 1226.6 多张背景图片 ........................................ 1236.6.1 背景大小 .................................... 1246.6.2 背景位置 .................................... 1246.6.3 背景属性的缩写 ......................... 1256.7 高分辨率背景图像 ................................ 1266.8 CSS 滤镜 ................................................ 1266.8.1 可用的 CSS 滤镜 ........................ 1276.8.2 使用多个 CSS 滤镜 .................... 1326.9 CSS 性能的警告 .................................... 1326.10 小结 ..................................................... 134第 7 章 SVG 与响应式 Web 设计 ........... 1357.1 SVG 的历史 ........................................... 1377.2 用文档表示的图像 ................................ 1377.2.1 SVG 的根元素 ............................ 1387.2.2 命名空间 .................................... 1397.2.3 标题和描述标签 ........................ 1397.2.4 defs 标签 .................................. 1397.2.5 元素 g ........................................ 1407.2.6 SVG 形状元素 ........................... 1407.2.7 SVG 路径 ................................... 1407.3 使用流行的图像编辑工具和服务创建 SVG ............................................... 1407.4 在 Web 页面中插入 SVG ...................... 1427.4.1 使用 img 标签 ........................... 1427.4.2 使用 object 标签 ..................... 1427.4.3 把 SVG 作为背景图像插入 ....... 1437.4.4 关于 data URI 的简短介绍......... 1447.4.5 生成图像精灵 ............................ 1457.5 内联 SVG............................................... 1457.5.1 利用符号复用图形对象 ............. 1467.5.2 根据上下文改变内联 SVG颜色 ........................................... 1477.5.3 复用外部图形对象资源 ............. 1487.6 不同插入方式下可以使用的功能 ......... 1497.7 SVG 的怪癖 ........................................... 1507.7.1 SMIL 动画.................................. 1507.7.2 使用外部样式表为 SVG 添加样式 ........................................... 1527.7.3 使用内联样式为 SVG 添加样式 ........................................... 1527.7.4 用 CSS 为 SVG 添加动画 .......... 1537.8 使用 JavaScript 添加 SVG 动画 ............ 1547.9 优化 SVG............................................... 1567.10 把 SVG 作为滤镜 ................................ 1577.11 SVG 中媒体查询的注意事项 .............. 1597.11.1 实现技巧 ................................ 1607.11.2 更多资料 ................................ 1607.12 小结 ..................................................... 161第 8 章 CSS3 过渡、变形和动画 ........... 1628.1 什么是 CSS3 过渡以及如何使用它 ...... 1628.1.1 过渡相关的属性 ........................ 1648.1.2 过渡的简写语法 ........................ 1658.1.3 在不同时间段内过渡不同属性 ........................................... 1654 目 录8.1.4 理解过渡调速函数 ..................... 1668.1.5 响应式网站中的有趣过渡 ......... 1678.2 CSS 的 2D 变形 ..................................... 1678.2.1 scale ........................................ 1688.2.2 translate ............................... 1688.2.3 rotate ...................................... 1718.2.4 skew .......................................... 1718.2.5 matrix ...................................... 1728.2.6 transform-origin 属性 ....... 1738.3 CSS3 的 3D 变形 ................................... 1748.4 CSS3 动画效果 ...................................... 1808.5 小结 ....................................................... 183第 9 章 表单 .............................................. 1849.1 HTML5 表单.......................................... 1849.2 理解 HTML5 表单中的元素 .................. 1859.2.1 placeholder ........................... 1869.2.2 required .................................. 1869.2.3 autofocus ............................... 1879.2.4 autocomplete ......................... 1889.2.5 list 及对应的 datalist元素 ........................................... 1889.3 HTML5 的新输入类型 .......................... 1909.3.1 email ........................................ 1909.3.2 number ...................................... 1919.3.3 url ............................................. 1929.3.4 tel ............................................. 1939.3.5 search ...................................... 1949.3.6 pattern .................................... 1959.3.7 color ........................................ 1969.3.8 日期和时间输入类型 ................. 1969.3.9 范围值 ....................................... 1989.4 如何给不支持新特性的浏览器打补丁 ....................................................... 1999.5 使用 CSS 美化 HTML5 表单 ................ 2009.5.1 显示必填项 ................................ 2029.5.2 创造一个背景填充效果 ............. 2049.6 小结 ....................................................... 205第 10 章 实现响应式 Web 设计 ............... 20610.1 尽快让设计在浏览器和真实设备上运行起来 ............................................. 20710.2 在真实设备上观察和使用设计 ........... 20710.3 拥抱渐进增强 ...................................... 20810.4 确定需要支持的浏览器 ...................... 20910.4.1 等价的功能，而不是等价的外观 ....................................... 20910.4.2 选择要支持的浏览器 ............. 20910.5 分层的用户体验 .................................. 21010.6 将 CSS 断点与 JavaScript 联系起来 ... 21110.7 避免在生产中使用 CSS 框架 .............. 21210.8 采用务实的解决方案 .......................... 21310.9 尽可能使用最简单的代码 ................... 21510.10 根据视口隐藏、展示和加载内容 ..... 21510.11 验证器和代码检测工具 .................... 21710.12 性能 ................................................... 21810.13 下一个划时代的产物 ........................ 21910.14 小结 ................................................... 219
评论