响应式Web设计：HTML5和CSS3实战（第2版） ([英] Ben Frain [[英] Ben Frain]) (Z-Library)

Page 1

(This page has no text content)

Page 2

版权信息 书名：响应式Web设计：HTML5和CSS3实战（第2版） 作者：[英] Ben Frain 译者：奇舞团 ISBN：978-7-115-44655-8 本书由北京图灵⽂化发展有限公司发⾏数字版。版权所有，侵权必究。 您购买的图灵电⼦书仅供您个⼈使⽤，未经授权，不得以任何⽅式复制和 传播本书内容。 我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。 如果购买者有侵权⾏为，我们可能对该⽤户实施包括但不限于关闭该帐号 等维权措施，并可能追究法律责任。 图灵社区会员 ⿊脸花猫（826597263@qq.com） 专享 尊重版权 版权声明 致谢 前⾔ 本书内容 阅读前提 读者对象 排版约定 读者反馈

Page 3

客户⽀持 下载⽰例代码 勘误表 侵权⾏为 问题 电⼦书 第 1 章 响应式Web设计基础 1.1 定义需求 1.2 什么是响应式Web设计 响应式Web设计的由来 1.3 浏览器⽀持 关于⼯具和⽂本编辑器 1.4 第⼀个响应式的例⼦ 1.4.1 HTML 1.4.2 图⽚ 1.4.3 媒体查询 1.5 ⽰例的不⾜之处 1.6 ⼩结 第 2 章 媒体查询 2.1 为什么响应式Web设计需要媒体查询 CSS中基本的条件逻辑 2.2 媒体查询的语法 在link标签中使⽤媒体查询 2.3 组合媒体查询 2.3.1 @import与媒体查询 2.3.2 在CSS中使⽤媒体查询 2.3.3 媒体查询可以测试哪些特性 2.4 通过媒体查询修改设计 2.4.1 任何CSS都可以放在媒体查询⾥ 2.4.2 针对⾼分辨率设备的媒体查询

Page 4

2.5 组织和编写媒体查询的注意事项 2.5.1 使⽤媒体查询链接不同的CSS⽂件 2.5.2 分隔媒体查询的利弊 2.5.3 把媒体查询写在常规样式表中 2.6 组合媒体查询还是把它们写在需要的地⽅ 2.7 关于视⼝的meta标签 2.8 媒体查询4级 2.8.1 可编程的媒体特性 2.8.2 交互媒体特性 2.8.3 悬停媒体特性 2.8.4 环境媒体特性 2.9 ⼩结 第 3 章 弹性布局与响应式图⽚ 3.1 将固定像素⼤⼩转换为弹性⽐例⼤⼩ 3.1.1 为什么需要Flexbox 3.1.2 ⾏内块与空⽩ 3.1.3 浮动 3.1.4 表格与表元 3.2 Flexbox概述 3.2.1 Flexbox三级跳 3.2.2 浏览器对Flexbox的⽀持 3.3 使⽤Flexbox 3.3.1 完美垂直居中⽂本 3.3.2 偏移 3.3.3 反序 3.3.4 不同媒体查询中的不同Flexbox布局 3.3.5 ⾏内伸缩 3.3.6 Flexbox的对⻬ 3.3.7 flex 3.3.8 简单的粘附⻚脚

Page 5

3.3.9 改变原始次序 3.3.10 Flexbox⼩结 3.4 响应式图⽚ 3.4.1 响应式图⽚的固有问题 3.4.2 通过srcset切换分辨率 3.4.3 srcset及sizes联合切换 3.4.4 picture元素 3.5 ⼩结 第 4 章 HTML5与响应式Web设计 4.1 得到普遍⽀持的HTML5标记 4.2 开始写HTML5⽹⻚ 4.2.1 doctype 4.2.2 HTML标签与lang属性 4.2.3 指定替代语⾔ 4.2.4 字符编码 4.3 宽容的HTML5 4.3.1 理性编写HTML5 4.3.2 向<a>标签致敬 4.4 HTML5的新语义元素 4.4.1 <main>元素 4.4.2 <section>元素 4.4.3 <nav>元素 4.4.4 <article>元素 4.4.5 <aside>元素 4.4.6 <figure>和<figcaption>元素 4.4.7 <detail>和<summary>元素 4.4.8 <header>元素 4.4.9 <footer>元素 4.4.10 <address>元素 4.4.11 h1到h6

Page 6

4.5 HTML5⽂本级元素 4.5.1 <b>元素 4.5.2 <em>元素 4.5.3 <i>元素 4.6 作废的HTML特性 4.7 使⽤HTML5元素 凭常识选择元素 4.8 WCAG和WAI-ARIA 4.8.1 WCAG 4.8.2 WAI-ARIA 4.8.3 如果你只能记住⼀件事 4.8.4 ARIA的更多⽤途 4.9 在HTML5中嵌⼊媒体 4.9.1 使⽤HTML5视频和⾳频 4.9.2 audio与video⼏乎⼀样 4.10 响应式HTML5视频与内嵌框架 4.11 关于“离线优先” 4.12 ⼩结 第 5 章 CSS3新特性 5.1 没⼈⽆所不知 5.2 剖析CSS规则 5.3 便捷的CSS技巧 CSS响应式多列布局 5.4 断字 5.4.1 截短⽂本 5.4.2 创建⽔平滚动⾯板 5.5 在CSS中创建分⽀ 5.5.1 特性查询 5.5.2 组合条件 5.5.3 Modernizr

Page 7

5.6 新CSS3选择符 5.6.1 CSS3属性选择符 5.6.2 CSS3⼦字符串匹配属性选择符 5.6.3 属性选择符的注意事项 5.6.4 属性选择符选择以数值开头的ID和类 5.7 CSS3结构化伪类 5.7.1 :last-child 5.7.2 nth-child 5.7.3 理解nth 5.7.4 基于nth的选择与响应式设计 5.7.5 :not 5.7.6 :empty 5.7.7 :first-line 5.8 CSS⾃定义属性和变量 5.9 CSS calc 5.10 CSS Level 4选择符 5.10.1 :has伪类 5.10.2 相对视⼝的⻓度 5.11 Web排版 5.11.1 @font-face 5.11.2 通过@font-face实现Web字体 5.11.3 注意事项 5.12 CSS3的新颜⾊格式及透明度 5.12.1 RGB 5.12.2 HSL 5.12.3 alpha通道 5.12.4 CSS Color Module Level 4的颜⾊操作 5.13 ⼩结 第 6 章 CSS3⾼级技术 6.1 CSS3的⽂字阴影特效

Page 8

6.1.1 省略blur值 6.1.2 多⽂字阴影 6.2 盒阴影 6.2.1 内阴影 6.2.2 多重阴影 6.2.3 阴影尺⼨ 6.3 背景渐变 6.3.1 线性渐变语法 6.3.2 径向渐变背景 6.3.3 为响应式⽽⽣的关键字 6.4 重复渐变 6.5 使⽤渐变背景创造图案 6.6 多张背景图⽚ 6.6.1 背景⼤⼩ 6.6.2 背景位置 6.6.3 背景属性的缩写 6.7 ⾼分辨率背景图像 6.8 CSS滤镜 6.8.1 可⽤的CSS滤镜 6.8.2 使⽤多个CSS滤镜 6.9 CSS性能的警告 CSS遮罩和剪裁的注意事项 6.10 ⼩结 第 7 章 SVG与响应式Web设计 7.1 SVG的历史 7.2 ⽤⽂档表⽰的图像 7.2.1 SVG的根元素 7.2.2 命名空间 7.2.3 标题和描述标签 7.2.4 defs标签

Page 9

7.2.5 元素g 7.2.6 SVG形状元素 7.2.7 SVG路径 7.3 使⽤流⾏的图像编辑⼯具和服务创建SVG 利⽤SVG图标服务 7.4 在Web⻚⾯中插⼊SVG 7.4.1 使⽤img标签 7.4.2 使⽤object标签 7.4.3 把SVG作为背景图像插⼊ 7.4.4 关于data URI的简短介绍 7.4.5 ⽣成图像精灵 7.5 内联SVG 7.5.1 利⽤符号复⽤图形对象 7.5.2 根据上下⽂改变内联SVG颜⾊ 7.5.3 复⽤外部图形对象资源 7.6 不同插⼊⽅式下可以使⽤的功能 浏览器兼容性问题 7.7 SVG的怪癖 7.7.1 SMIL动画 7.7.2 使⽤外部样式表为SVG添加样式 7.7.3 使⽤内联样式为SVG添加样式 7.7.4 ⽤CSS为SVG添加动画 7.8 使⽤JavaScript添加SVG动画 使⽤GreenSock添加SVG动画 7.9 优化SVG 7.10 把SVG作为滤镜 7.11 SVG中媒体查询的注意事项 7.11.1 实现技巧 7.11.2 更多资料 7.12 ⼩结

Page 10

第 8 章 CSS3过渡、变形和动画 8.1 什么是CSS3过渡以及如何使⽤它 8.1.1 过渡相关的属性 8.1.2 过渡的简写语法 8.1.3 在不同时间段内过渡不同属性 8.1.4 理解过渡调速函数 8.1.5 响应式⽹站中的有趣过渡 8.2 CSS的2D变形 8.2.1 scale 8.2.2 translate 8.2.3 rotate 8.2.4 skew 8.2.5 matrix 8.2.6 transform-origin属性 8.3 CSS3的3D变形 transform3d属性 8.4 CSS3动画效果 animation-fill-mode属性 8.5 ⼩结 第 9 章 表单 9.1 HTML5表单 9.2 理解HTML5表单中的元素 9.2.1 placeholder 9.2.2 required 9.2.3 autofocus 9.2.4 autocomplete 9.2.5 list及对应的datalist元素 9.3 HTML5的新输⼊类型 9.3.1 email 9.3.2 number

Page 11

9.3.3 url 9.3.4 tel 9.3.5 search 9.3.6 pattern 9.3.7 color 9.3.8 ⽇期和时间输⼊类型 9.3.9 范围值 9.4 如何给不⽀持新特性的浏览器打补丁 9.5 使⽤CSS美化HTML5表单 9.5.1 显⽰必填项 9.5.2 创造⼀个背景填充效果 9.6 ⼩结 第 10 章 实现响应式Web设计 10.1 尽快让设计在浏览器和真实设备上运⾏起来 让设计决定断点 10.2 在真实设备上观察和使⽤设计 10.3 拥抱渐进增强 10.4 确定需要⽀持的浏览器 10.4.1 等价的功能，⽽不是等价的外观 10.4.2 选择要⽀持的浏览器 10.5 分层的⽤户体验 实现体验分层 10.6 将CSS断点与JavaScript联系起来 10.7 避免在⽣产中使⽤CSS框架 10.8 采⽤务实的解决⽅案 使⽤链接代替按钮 10.9 尽可能使⽤最简单的代码 10.10 根据视⼝隐藏、展⽰和加载内容 将复杂的可视化⼯作交给CSS 10.11 验证器和代码检测⼯具

Page 12

10.12 性能 10.13 下⼀个划时代的产物 10.14 ⼩结 版权声明 Copyright © 2015 Packt Publishing. First published in the English language under the title Responsive Web Design with HTML5 and CSS3, Second Edition . Simplified Chinese-language edition copyright © 2017 by Posts & Telecom Press. All rights reserved. 本书中⽂简体字版由Packt Publishing授权⼈⺠邮电出版社独家出版。未经出 版者书⾯许可，不得以任何⽅式复制或抄袭本书内容。 版权所有，侵权必究。 致谢 感谢本书技术审校专家牺牲个⼈闲暇时间，提出了宝贵意⻅。他们提升了 这本书的品质。 感谢Web社区持续地分享新的信息，没有他们的分享，我的⼯作不会那么令 ⼈惬意。 最重要的，感谢我的家⼈。为了写这本书，我少产出了不少电视剧集（为 ⽼婆），少喝了很多杯茶（陪⽗⺟），少出席了很多次“华⼭论剑”（跟⼉ ⼦）。

Page 13

前⾔ 响应式Web设计是⼀种统⼀的解决⽅案，可以让Web作品适配⼿机、平板和 桌⾯电脑。响应式的⽹站可以适应⽤户的屏幕⼤⼩，为今天和明天的设备 都提供最佳⽤户体验。 本书涵盖响应式Web设计的所有相关内容。不仅如此，通过介绍最新和最有 ⽤的HTML5和CSS3技术，还扩充了响应式设计的⽅法库，让设计变得更简 单，更好维护。此外，本书还讨论了编写和交付代码、图⽚、⽂件的最佳 实践。 只要会⽤HTML和CSS，就可以学会响应式Web设计。 本书内容 第1章，“响应式Web设计基础”，简要介绍响应式Web设计相关的技术。 第2章，“媒体查询”，系统讲解CSS媒体查询，包括它的能⼒、语法，以及 各种使⽤⽅式。 第3章，“弹性布局与响应式图⽚”，展⽰如何设计⽐例缩放布局和响应式图 ⽚，并对Flexbox布局进⾏全⽅位介绍。 第4章，“HTML5与响应式Web设计”，探讨HTML5中的语义元素、⽂本级语 义，以及⽆障碍⽅⾯的考虑，还介绍了如何在⽹⻚中添加视频和⾳频。 第5章，“CSS3新特性”，探讨CSS选择符、HSLA及RGBA颜⾊、Web排版、 视⼝相对单位，等等。 第6章，“CSS3⾼级技术”，探讨CSS滤镜、盒阴影、线性与放射渐变、多背 影，以及如何为⾼分辨率设备提供背景图⽚。 第7章，“SVG与响应式Web设计”，讲述在⽂档中使⽤SVG、将SVG作为背 影图⽚，以及通过JavaScript添加交互。

Page 14

第8章，“CSS3过渡、变形和动画”，看⼀看使⽤CSS能够做出哪些交互与动 画效果。 第9章，“表单”，在HTML5和CSS3之前，表单⼀直是个难题，现在不同 了。 第10章，“实现响应式Web设计”，阐述在着⼿实现响应式Web设计时需要考 虑的重要因素，并给⼤家提供⼀些实⽤的建议。 阅读前提 需要⼀个⽂本编辑器 需要⼀个主流浏览器 喜欢⼀些⽆聊的笑话 读者对象 你是否需要写两个⽹站，⼀个针对⼿机，⼀个针对⼤显⽰器？或者你已经 完成了⼀版响应式Web设计作品，但不知道怎么把它跟之前的⽹站集成起 来？好，本书可以告诉你想知道的⼀切。 只需⼀些HTML和CSS基础就可以轻松看懂这本书，⽽本书还包含了关于响 应式Web设计及优秀⽹站设计的更多内容。 排版约定 在本书中，你会发现⼀些不同的⽂本样式，⽤以区别不同种类的信息。下 ⾯是这些样式的⼀些例⼦和解释。 正⽂中的代码、数据库表名、⽤户输⼊会以等宽字体进⾏表⽰，如：“为了 解决前⾯的问题，可以在⽹⻚的<head> 中添加下⾯这⾏代码。”

Page 15

代码段格式如下所⽰： img { max-width: 100%; } 新术语 和重点词汇 均采⽤楷体字表⽰。  这个图标表⽰警告或需要特别注意的内容。    这个图标表⽰提⽰或者技巧。 读者反馈 我们总是欢迎读者的反馈。如果你对本书有些想法，有什么喜欢或是不喜 欢的，请反馈给我们。这将有助于我们开发出能够充分满⾜读者需求的图 书。 ⼀般的反馈，请发送电⼦邮件⾄feedback@packtpub.com，并在邮件主题中 包含书名。 如果你在某个领域有专⻓，并有意编写⼀本书或是贡献⼀份⼒量，请参考 我们的作者指南，地址为http://www.packtpub.com/authors 。 客户⽀持 现在，你是⼀位令我们⾃豪的Packt图书的拥有者，我们会尽全⼒帮你充分 利⽤你⼿中的书。 下载⽰例代码

Page 16

你可以⽤你的账户从http://www.packtpub.com 下载所有已购买Packt图书的⽰ 例代码⽂件。如果你从其他地⽅购买本书，可以访问 http://www.packtpub.com/support 并注册，我们将通过电⼦邮件把⽂件发送 给你。 勘误表 虽然我们已尽⼒确保本书内容正确，但出错仍旧在所难免。如果你在我们 的书中发现错误，不管是⽂本还是代码，希望能告知我们，我们不胜感 激。这样做，你可以使其他读者免受挫败，帮助我们改进本书的后续版 本。如果你发现任何错误，请访问http://www.packtpub.com/submit-errata 提 交，选择你的书，点击勘误表提交表单的链接，并输⼊详细说明。勘误⼀ 经核实，你的提交将被接受，此勘误将上传到本公司⽹站或添加到现有勘 误表。从http://www.packtpub.com/support 选择书名就可以查看现有的勘误 表。 侵权⾏为 版权材料在互联⽹上的盗版是所有媒体都要⾯对的问题。Packt⾮常重视保 护版权和许可证。如果你发现我们的作品在互联⽹上被⾮法复制，不管以 什么形式，都请⽴即为我们提供位置地址或⽹站名称，以便我们可以寻求 补救。 请把可疑盗版材料的链接发到copyright@packtpub.com。 ⾮常感谢你帮助我们保护作者，以及保护我们给你带来有价值内容的能 ⼒。 问题 如果你对本书内容存有疑问，不管是哪个⽅⾯，都可以通过 questions@packtpub.com联系我们，我们将尽最⼤努⼒来解决。 电⼦书

Page 17

扫描如下⼆维码，即可购买本书电⼦版。 第 1 章 响应式Web设计基础 ⼏年前，我们看到的⽹站还都是固定宽度的，⽬标是让所有⽤户都拥有相 同的体验。这种固定宽度（通常为960像素左右）对笔记本电脑来说也不算 宽，拥有更⼤显⽰器的⽤户则会在两侧看到很⼤的⽩边。 2007年，苹果iPhone⾸次带来了真正意义的⼿机上⽹体验，彻底改变了⼈们 上⽹的⽅式。 本书第1版曾这么写道： “从2010年7⽉到2011年7⽉，短短12个⽉，全球⼿机浏览器的使⽤量就 从2.86%飙升⾄7.02%。” 2015年年中，同⼀家调查机构（gs.statcounter.com）的数据显⽰，这个数字 已经达到33.47%。北美地区的数字则是25.86%。 不管怎么统计，移动设备的增⻓都是前所未有的。与此同时，27英⼨乃⾄ 30英⼨的⼤屏幕显⽰器如今也成为了司空⻅惯的东⻄。这样⼀来，上⽹设

Page 18

备屏幕之间的差距也达到了前所未有之⼤。 ⾯对不断扩展的浏览器和设备，我们还是有应对⽅案的。这个⽅案就是基 于HTML5和CSS3的响应式Web设计。响应式Web设计可以让⼀个⽹站同时 适配多种设备和多个屏幕，可以让⽹站的布局和功能随⽤户的使⽤环境 （屏幕⼤⼩、输⼊⽅式、设备/浏览器能⼒）⽽变化。 不仅如此，基于HTML5和CSS3的响应式Web设计，并不需要依赖服务端或 后端⽅案。 1.1 定义需求 ⽆论你是刚刚接触响应式Web设计、HTML5、CSS3，还是已经对它们很熟 悉了，我都希望本章可以实现两个⽬标。 如果你已经在⾃⼰的响应式Web设计中使⽤了HTML5和CSS3，本章可以帮 你快速做⼀个回顾。如果你是⼀位新⼿，可以把这⼀章看成“新⼿训练 营”，它会告诉你阅读本书所需的⼀切。 学完本章，你将对实现响应式Web设计有⼀个全⾯清晰的了解。 有⼈会问，既然如此，剩下9章有什么⽤呢？本章最后也会对此给出答案。 以下是本章的主要内容： 定义响应式Web设计 如何确定浏览器⽀持程度 ⼯具和⽂本编辑器 第⼀个响应式的例⼦ 视⼝meta 标签的重要意义

Page 19

怎么让图⽚随窗⼝缩放 ⽤CSS3媒体查询定义断点 前⾯例⼦的不⾜之处 为什么学习之旅才刚刚开始 1.2 什么是响应式Web设计 “响应式Web设计”这个名字是Ethan Marcotte在2010年发明的。当时，他在A List Apart上写了⼀篇⽂章（http://www.alistapart.com/articles/responsive-web- design/ ），这篇⽂章综合运⽤了三种已有技术（弹性⽹格布局、弹性图⽚/ 媒体、媒体查询）实现了⼀个解决⽅案，就叫“响应式Web设计”。 响应式Web设计的由来 所谓响应式Web设计，就是⽹⻚内容会随着访问它的视⼝及设备的不同⽽呈 现不同的样式。 最初，响应式设计是从“桌⾯”、固定宽度设计开始的。然后，到了⼩屏幕 上，内容会重排，或者根据情况隐藏部分内容。可是，随着时间推移，⼈ 们发现，还是采⽤相反的设计思路更好，即先为⼩屏幕设计内容、样式， 然后再向⼤屏幕扩展。 详细介绍这些情况之前，我们先来看看浏览器⽀持与⽂本编辑器/⼯具。 1.3 浏览器⽀持 由于响应式Web设计已经⼴为⼈知，所以跟客户及相关⽅沟通变得越来越容 易。提到“响应式Web设计”，很多⼈都表⽰知道怎么回事。⽽写⼀个项⽬就 可以满⾜所有设备的说法也很有竞争优势。

Page 20

不过，浏览器⽀持⼀直是响应式Web设计⾯临的最⼤问题。市⾯上如此多的 浏览器和设备，要想⼀个不落地⽀持并不现实。有时候是时间问题，有时 候是预算问题，有时候两⽅⾯问题都有。 ⼀般来说，要⽀持的浏览器版本越早，想达到现代浏览器中相同功能和效 果所需的⼯作量就越⼤。因此，最好的做法是先写⼀个较轻量的代码架 构，然后根据所需的体验针对能⼒更强的浏览器进⾏扩展，包括视觉和功 能。 本书上⼀版还花了不少篇幅介绍怎么迎合⽼旧版本的桌⾯浏览器。但这⼀ 版不会在这⽅⾯浪费时间了。 在写作这⼀版的2015年年中，IE6、IE7、IE8基本消失了，就连IE9的市场份 额也降到了2.45%（IE10只占1.94%，IE11上升到了11.68%）。如果你必须 考虑兼容IE8甚⾄更低版本，在同情你的遭际之余，我必须坦率地告诉你， 这本书⾥没多少相关的内容可资利⽤。 对于其他⼈来说，应该劝告⾃⼰的客户或⽼板，告诉他们为什么给那些“残 疾”浏览器写代码是错误的，⽽把时间和资源主要放在⽀持现代浏览器和现 代平台上才是最明智的。 不过到最后，唯⼀重要的因素还是你⾃⼰。在通常情况下，我们写的⽹站 必须在所有常⽤浏览器⾥表现正常。除了基本功能，有必要提前确定针对 哪个平台要实现最强的功能，以便对其他平台上的视觉和功能作出相应取 舍。 这是⾮常实际的做法，因为从最简单的“基本”体验开始，逐步扩充（所 谓“渐进增强 ”）更容易。相反，先做出⼤⽽全的版本，然后再针对能⼒不 ⾜的平台寻找后备⽅案（所谓“平稳退化 ”）则要⿇烦得多。 为了进⼀步说明提前确定主要⽀持平台很重要，我们举个例⼦。假设你很 倒霉，25%的⽤户都在⽤IE9，那你必须考虑这个版本的IE都⽀持什么特 性，然后再相应地剪裁⾃⼰的设计⽅案。同样，如果有⼤量⽤户使⽤的⼿