1、内 容 提 要本书将当前 Web 设计中热门的响应式设计技术与 HTML5 和 CSS3 结合起来，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。书中不仅讨论了媒体查询、弹性布局、响应式图片，更将最新和最有用的 HTML5 和 CSS3 技术一并讲解，是学习最新 Web 设计技术不可多得的佳作。本书适合所有 Web 开发和设计人员阅读。定价：59.00元读者服务热线：(010)51095186转600印装质量热线：(010)81055316反盗版热线：(010)81055315广告经营许可证：京东工商广字第 8052 号著英 Ben Frain译奇舞团责任编辑岳新欣责任印
2、制彭志环人民邮电出版社出版发行北京市丰台区成寿寺路11号邮编100164电子邮件网址http:/北京印刷开本：80010001/16印张：14.5 字数：343千字2017年 2 月第 1 版印数：1 4 000册2017年 2 月北京第 1 次印刷著作权合同登记号 图字：01-2016-4800号前 言 1 1 2 3 4 5 8 10 13 9 6 7 12 11 前 言响应式Web设计是一种统一的解决方案，可以让Web作品适配手机、平板和桌面电脑。响应式的网站可以适应用户的屏幕大小，为今天和明天的设备都提供最佳用户体验。 本书涵盖响应式Web设计的所有相关内容。不仅如此，通过介绍最新和最
3、有用的HTML5和CSS3技术，还扩充了响应式设计的方法库，让设计变得更简单，更好维护。此外，本书还讨论了编写和交付代码、图片、文件的最佳实践。 只要会用HTML和CSS，就可以学会响应式Web设计。 本书内容第1章， “响应式Web设计基础” ，简要介绍响应式Web设计相关的技术。 第2章， “媒体查询” ，系统讲解CSS媒体查询，包括它的能力、语法，以及各种使用方式。 第3章， “弹性布局与响应式图片” ，展示如何设计比例缩放布局和响应式图片，并对Flexbox布局进行全方位介绍。 第4章， “HTML5与响应式Web设计” ，探讨HTML5中的语义元素、文本级语义，以及无障碍方面的考虑，
4、还介绍了如何在网页中添加视频和音频。 第5章， “CSS3新特性” ，探讨CSS选择符、HSLA及RGBA颜色、Web排版、视口相对单位，等等。 第6章， “CSS3高级技术” ，探讨CSS滤镜、盒阴影、线性与放射渐变、多背影，以及如何为高分辨率设备提供背景图片。 第7章， “SVG与响应式Web设计” ，讲述在文档中使用SVG、将SVG作为背影图片，以及通过JavaScript添加交互。 第8章， “CSS3过渡、变形和动画” ，看一看使用CSS能够做出哪些交互与动画效果。 第9章， “表单” ，在HTML5和CSS3之前，表单一直是个难题，现在不同了。 2 前 言 第10章， “实现响应式
5、Web设计” ，阐述在着手实现响应式Web设计时需要考虑的重要因素，并给大家提供一些实用的建议。 阅读前提需要一个文本编辑器需要一个主流浏览器喜欢一些无聊的笑话读者对象你是否需要写两个网站，一个针对手机，一个针对大显示器？或者你已经完成了一版响应式Web设计作品，但不知道怎么把它跟之前的网站集成起来？好，本书可以告诉你想知道的一切。 只需一些HTML和CSS基础就可以轻松看懂这本书，而本书还包含了关于响应式Web设计及优秀网站设计的更多内容。 排版约定在本书中，你会发现一些不同的文本样式，用以区别不同种类的信息。下面是这些样式的一些例子和解释。 正文中的代码、数据库表名、用户输入会以等宽字体进
6、行表示，如： “为了解决前面的问题，可以在网页的中添加下面这行代码。 ” 代码段格式如下所示： img max-width: 100%; 新术语和重点词汇均采用楷体字表示。这个图标表示警告或需要特别注意的内容。 这个图标表示提示或者技巧。 前 言 3 1 2 3 4 5 8 10 13 9 6 7 12 11 读者反馈我们总是欢迎读者的反馈。如果你对本书有些想法，有什么喜欢或是不喜欢的，请反馈给我们。这将有助于我们开发出能够充分满足读者需求的图书。 一般的反馈，请发送电子邮件至，并在邮件主题中包含书名。 如果你在某个领域有专长，并有意编写一本书或是贡献一份力量，请参考我们的作者指南，地址为ht
7、tp:/ 客户支持现在，你是一位令我们自豪的Packt图书的拥有者，我们会尽全力帮你充分利用你手中的书。 下载示例代码你可以用你的账户从http:/下载所有已购买Packt图书的示例代码文件。如果你从其他地方购买本书，可以访问http:/ 勘误表虽然我们已尽力确保本书内容正确，但出错仍旧在所难免。如果你在我们的书中发现错误，不管是文本还是代码，希望能告知我们，我们不胜感激。这样做，你可以使其他读者免受挫败，帮助我们改进本书的后续版本。如果你发现任何错误，请访问http:/ submit-errata提交，选择你的书，点击勘误表提交表单的链接，并输入详细说明。勘误一经核实，你的提交将被接受，此勘
8、误将上传到本公司网站或添加到现有勘误表。从http:/www.packtpub. com/support选择书名就可以查看现有的勘误表。 侵权行为版权材料在互联网上的盗版是所有媒体都要面对的问题。Packt非常重视保护版权和许可证。如果你发现我们的作品在互联网上被非法复制，不管以什么形式，都请立即为我们提供位置地址或网站名称，以便我们可以寻求补救。 请把可疑盗版材料的链接发到。 非常感谢你帮助我们保护作者，以及保护我们给你带来有价值内容的能力。 4 前 言 问题如果你对本书内容存有疑问，不管是哪个方面，都可以通过联系我们，我们将尽最大努力来解决。 电子书扫描如下二维码，即可购买本书电子版。 目
9、 录 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 18 17 目 录第 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 im
10、port与媒体查询 . 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 级
11、 . 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 .
12、 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 2 目 录 3.4.2 通过srcset切换分辨率 . 59 3.4.3 srcset及sizes联合切换 . 59 3.4.4
13、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 元素.
14、 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 如果你只能
15、记住一件事 . 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 在 CS
16、S 中创建分支 . 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.
17、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 目 录 3 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 18 17 5.11.2 通过font-face实现 Web字体 . 107 5.11.3 注意
18、事项 . 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
19、.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 第
20、 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.
21、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 为
22、 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 4 目 录 8.1.4 理解
23、过渡调速函数 . 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
24、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
25、范围值 . 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
26、 分层的用户体验 . 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 1.1 定义需求 1 1 2 3 4 5 8 6 7 8 8 响应式Web设计基础 几年前，我们看到的网站还都是固定宽度的，目标是让所有用户都拥有相同
27、的体验。这种固定宽度（通常为960像素左右）对笔记本电脑来说也不算宽，拥有更大显示器的用户则会在两侧看到很大的白边。 2007年，苹果iPhone首次带来了真正意义的手机上网体验，彻底改变了人们上网的方式。 本书第1版曾这么写道： “从2010年7月到2011年7月，短短12个月，全球手机浏览器的使用量就从2.86%飙升至7.02%。 ” 2015年年中，同一家调查机构（）的数据显示，这个数字已经达到33.47%。北美地区的数字则是25.86%。 不管怎么统计，移动设备的增长都是前所未有的。与此同时，27英寸乃至30英寸的大屏幕显示器如今也成为了司空见惯的东西。 这样一来， 上网设备屏幕之间的
28、差距也达到了前所未有之大。 面对不断扩展的浏览器和设备，我们还是有应对方案的。这个方案就是基于HTML5和CSS3的响应式Web设计。响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。 不仅如此，基于HTML5和CSS3的响应式Web设计，并不需要依赖服务端或后端方案。 1.1 定义需求 无论你是刚刚接触响应式Web设计、HTML5、CSS3，还是已经对它们很熟悉了，我都希望本章可以实现两个目标。 如果你已经在自己的响应式Web设计中使用了HTML5和CSS3，本章可以帮你快速做一个回顾。如果你是一位
29、新手，可以把这一章看成“新手训练营” ，它会告诉你阅读本书所需的一切。 学完本章，你将对实现响应式Web设计有一个全面清晰的了解。 第 1 章2 第 1章 响应式 Web 设计基础 有人会问，既然如此，剩下9章有什么用呢？本章最后也会对此给出答案。 以下是本章的主要内容： 定义响应式Web设计如何确定浏览器支持程度工具和文本编辑器第一个响应式的例子视口meta标签的重要意义怎么让图片随窗口缩放用CSS3媒体查询定义断点前面例子的不足之处为什么学习之旅才刚刚开始1.2 什么是响应式 Web 设计 “响应式Web设计”这个名字是Ethan Marcotte在2010年发明的。当时，他在A List
30、 Apart上写了一篇文章（http:/ ，这篇文章综合运用了三种已有技术（弹性网格布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫“响应式Web设计” 。 响应式 Web 设计的由来 所谓响应式Web设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。 最初，响应式设计是从“桌面” 、固定宽度设计开始的。然后，到了小屏幕上，内容会重排，或者根据情况隐藏部分内容。可是，随着时间推移，人们发现，还是采用相反的设计思路更好，即先为小屏幕设计内容、样式，然后再向大屏幕扩展。 详细介绍这些情况之前，我们先来看看浏览器支持与文本编辑器/工具。 1.3 浏览器支持 由于响应式Web设
31、计已经广为人知，所以跟客户及相关方沟通变得越来越容易。提到“响应式Web设计” ，很多人都表示知道怎么回事。而写一个项目就可以满足所有设备的说法也很有竞争优势。 不过，浏览器支持一直是响应式Web设计面临的最大问题。市面上如此多的浏览器和设备，1.3 浏览器支持 3 1 2 3 4 5 8 6 7 8 8 要想一个不落地支持并不现实。 有时候是时间问题， 有时候是预算问题， 有时候两方面问题都有。 一般来说，要支持的浏览器版本越早，想达到现代浏览器中相同功能和效果所需的工作量就越大。因此，最好的做法是先写一个较轻量的代码架构，然后根据所需的体验针对能力更强的浏览器进行扩展，包括视觉和功能。 本
32、书上一版还花了不少篇幅介绍怎么迎合老旧版本的桌面浏览器。 但这一版不会在这方面浪费时间了。 在写作这一版的2015年年中，IE6、IE7、IE8基本消失了，就连IE9的市场份额也降到了2.45%（IE10只占1.94%，IE11上升到了11.68%） 。如果你必须考虑兼容IE8甚至更低版本，在同情你的遭际之余，我必须坦率地告诉你，这本书里没多少相关的内容可资利用。 对于其他人来说，应该劝告自己的客户或老板，告诉他们为什么给那些“残疾”浏览器写代码是错误的，而把时间和资源主要放在支持现代浏览器和现代平台上才是最明智的。 不过到最后，唯一重要的因素还是你自己。在通常情况下，我们写的网站必须在所有常
33、用浏览器里表现正常。除了基本功能，有必要提前确定针对哪个平台要实现最强的功能，以便对其他平台上的视觉和功能作出相应取舍。 这是非常实际的做法，因为从最简单的“基本”体验开始，逐步扩充（所谓“渐进增强” ）更容易。相反，先做出大而全的版本，然后再针对能力不足的平台寻找后备方案（所谓“平稳退化” ）则要麻烦得多。 为了进一步说明提前确定主要支持平台很重要，我们举个例子。假设你很倒霉，25%的用户都在用IE9，那你必须考虑这个版本的IE都支持什么特性，然后再相应地剪裁自己的设计方案。同样，如果有大量用户使用的手机平台是Android 2，你也要考虑类似的问题。不同平台需要考虑的“基本”体验相差很大。
34、 如果没有合适的数据，那么我会按照一个简单粗暴的逻辑来决定是否开发某个特定平台/浏览器的版本：如果支持浏览器X的开发成本超过了浏览器X的用户创造的收益，那么就不为该浏览器开发特殊的版本。 能不能适配某个旧平台/版本不是问题，问题在于是否应该去适配它。 在确定哪些平台和浏览器版本支持什么特性时，建议参考这个网站：http:/。这个网站的界面简洁，查询方便。 4 第 1章 响应式 Web 设计基础 关于工具和文本编辑器用什么文本编辑器或IDE来写响应式网站都一样。如果你觉得某个简单的文本编辑器足够你高效编写HTML、CSS和JavaScript代码，那就行啦。其他工具也一样，没有哪个工具是必需的。
35、只要能让你写HTML、CSS和JavaScript就行。Sublime Text、Vim、Coda、Visual Studio、Notepad，选哪一个都不重要，你喜欢就好。 不过，请大家注意，现在确实出现了不少新工具（通常也是免费的） 。这些工具可以把以往需要手工来做的事自动化。比如，CSS预处理器（Sass、LESS、Stylus、PostCSS）可以帮我们组织代码、变量、颜色操作和数学运算。像PostCSS这样的工具可以帮我们完成添加浏览器前缀这样烦琐的任务。另外，一些清理和验证工具可以帮我们检查HTML、CSS和JavaScript代码是否符合标准，自动提示输入错误和语法错误。 新工具
36、始终在不断涌现，而且会不断改进。虽然本书有时会提到一些有用工具的名字，但并不代表对你来说最合适，你应该去找最适合自己的。事实上，本书的示例除了HTML和CSS标准之外，不依赖任何工具。至于怎么利用前端工具让自己的代码更快更可靠，那是你的事。 1.4 第一个响应式的例子 本章开头承诺让你在学完这一章之后，了解所有与响应式Web设计相关的知识。前面我们讨1.4 第一个响应式的例子 5 1 2 3 4 5 8 6 7 8 8 论的都是一些相关话题，现在该付诸行动了。 代码示例下载本书示例代码的地址是：http:/rwd.education/download.zip或https:/git- 1.4.1
37、 HTML 先从HTML5结构讲起。大家先不要着急理解每一行代码的用途（特别是中的代码） ，第4章会详细介绍它们。 现在，我们只关注标签中的元素。必须承认，现在的网页看起来一点也不特别，只有几个DIV、一张LOGO图、一张图片（看起来很好吃的松饼） 、一两段文本和一个项目列表 。 以下是删节后的代码。 为简单起见， 段落中的文字已经隐藏了， 因为我们要关注的只是结构。只要知道那些文字介绍了怎么制作标准的英式松饼就行了。 如果想看完整的HTML文件，请解压下载后的代码。 Our first responsive web page with HTML5 and CSS3 Scones: the m
38、ost resplendent of snacks Occasionally maligned and misunderstood; the scone is a quintessentially British classic. Incredible scones, picture from Wikipedia 6 第 1章 响应式 Web 设计基础 Recipe and serving suggestions follow. Ingredients Method 默认情况下，网页布局是弹性的。就它现在这个样子把它打开（还不包含媒体查询） ，缩放浏览器窗口，你会看见文本会根据屏幕缩放自动重排
39、。 那换个设备怎么样呢？在没有CSS的情况下，iPhone中的效果如下图所示。 1.4 第一个响应式的例子 7 1 2 3 4 5 8 6 7 8 8 在iPhone中也是一个“正常的”网页。这是因为iOS默认会按980像素宽度来渲染网页，然后再把页面缩小呈现在视口当中。 浏览器中用于呈现网页的区域叫视口（viewport） 。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。 因此，从现在开始，我们会使用这个准确的术语指代可以呈现网页的区域。 为了解决前面的问题，可以在网页的中添加下面这行代码： 这个视口的标签是一种非标准的（但却是事实标准的）方式，它告诉浏览器怎么渲染网页。在这里
40、，标签想表达的意思是：按照设备的宽度（device-width）来渲染网页内容。事实上，在支持这个标签的设备上给你看一看效果，你就明白了。 不错呀！现在，网页中的文字看起来更有“原生”的感觉了。我们继续。 第2章在介绍媒体查询的时候还会详细讨论标签的更多设置和组合用法。 8 第 1章 响应式 Web 设计基础 1.4.2 图片 有人说“一图胜千言” ，确实如此。我们网页中关于松饼的文字介绍再多，也没有图片有吸引力。下面我们就在页面上方添加一张松饼的图片，效果类似引诱用户往下看的大题图。 哇，真是好大一张图（2000像素宽） ，它让整个网页看起来都失衡了。不行，必须解决这个问题。可以用CSS给图
41、片指定固定宽度，但问题是我们想让它能在不同大小的屏幕中自动缩放。 比如，我们例子中的iPhone屏幕宽度为320像素，如果我们把图片设置成320像素宽，那么iPhone屏幕旋转后又怎么办呢？这时候320像素变成了480像素。解决方案很简单，只要一行CSS代码就可以让图片随容器宽度自动缩放。 在这里我们创建一个CSS文件：css/styles.css，将它链接到HTML页面的头部。 以下是我们在这个CSS文件中写的代码。一般来说，应该先设置一些默认值，这些话题后面几章我们再讨论。现在我们就加入这点代码： img max-width: 100%; 1.4 第一个响应式的例子 9 1 2 3 4 5
42、 8 6 7 8 8 回到手机上，刷新页面，结果比较符合预期了。 这里声明max-width规则，就是要保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大） 。此时，如果包含图片的元素（比如包含图片的body或div）比图片固有宽度小，图片会缩放占满最大可用空间。 为什么不用width:100%? 要实现图片的自动缩放，也可以使用更通用的width属性，比如width:100%。然而，这条规则在这里的效果不同。如果给width属性设置一个值，那么图片就会按照该值显示，不考虑自身固有宽度。以我们例子中的LOGO（同样也是一张图片）为例，这条规则会导致它显示得跟它的容器一样宽。在
43、容器比图片宽得多的情况下（就像我们这里的LOGO一样） ，图片会被无谓地拉伸。 很好， 现在图片和文本都显示正常了。 不管视口多大， 至少水平方向上再也没有内容溢出了。 再回过头来在较大的视口中看看效果。下图是在视口宽度大约为1400像素下看到的效果，基本样式下的文本和图片明显被拉长了。 10 第 1章 响应式 Web设计基础 这可不行！事实上，视口宽度达到600像素时，效果就不好了。在这个宽度上，如果我们可以对某些元素进行重排，也许可以有所改进，比如调整图片大小并将其放置在一侧，或修改某些元素的字体大小和背影颜色。 没问题，使用CSS媒体查询可以轻易实现我们说的所有功能。 1.4.3 媒体查
44、询 我们知道，当视口宽度超过600像素时，当前的页面布局存在被严重拉伸的问题。下面我们就使用CSS3的媒体查询根据屏幕宽度来调整布局。媒体查询可以让我们在某些条件下（如宽度和高度为多少的情况下）为网页应用样式。 不针对流行的设备宽度设置断点所谓“断点” ，就是某个宽度临界点，跨过这个点布局就会发生显著变化。 人们在刚开始使用媒体查询的时候，经常会针对当时流行的设备设置断点。当时，iPhone（320像素 480像素）和iPad（768像素 1024像素）的宽度决定了断点。 不过，当时那样做并不好，现在来看就更不可取了。这是因为这样实际上把设计跟特定的屏幕大小绑定了。既然是响应式设计，那应该与显
45、示它的设备无关才对，而不是只在某些屏幕中才最合适。 断点应该由内容和设计本身决定。比如你的设计可能在500像素或更宽的时候看起来就不对了，当然也许是800像素。总之，断点应该由你自己的项目设计决定。 1.4 第一个响应式的例子 11 1 2 3 4 5 8 6 7 8 8 第2章将全面介绍媒体查询，因此“媒体查询”也是那一章的名字。 不过， 为了说明如何改进我们的设计， 这里可以只关注一种媒体查询， 即最小宽度媒体查询。在这个媒体查询中设置的CSS规则，只在视口符合最小定义宽度条件时才会应用到网页。实际的最小宽度可以使用不同的长度单位指定，比如百分比、em、rem和px。在CSS中，最小宽度媒
46、体查询是这样写的： media screen and (min-width: 50em) /* 样式 */ media指令告诉浏览器这里是一个媒体查询，screen（技术上讲，不需要在这里声明“屏幕” ，具体细节请参考下一章）告诉浏览器这里的规则只适用于屏幕类型，而and (min-width: 50em)的意思是其中的规则只适用于视口宽度在50em以上的情况。 Bryan Rieger第一次指出 （http:/ mobile-web-by-yiibu） ： “没有媒体查询本身就是媒体查询。 ” 这句话的意思就是，我们在媒体查询外面写的第一条规则，实际上是针对所有媒体的“基本”样式。在此基础上
47、，可以再针对不同能力的设备加以扩展。 现在，只要知道应该以最小屏幕为起点，然后再根据需求渐进扩充视觉和功能即可。 针对更大的屏幕做修改我们知道，视口宽度达到600像素（或37.5rem）时，布局就会显得很难看。下面我们再通过一个例子，来展示怎么根据视口大小实现不同的布局。 基本上所有浏览器默认的文本大小都是16像素，因此用像素值除以16就可以得到rem值。第2章会进一步介绍为什么需要这样做。 首先，不让题图太大，而是把它挪到右侧去。然后把介绍文字放在图的左侧。 然后，再把主要的文本内容，也就是如何制作松饼的方法，放在位于右侧带框线的配料表左下方。 这些样式调整都可以封装到一个媒体查询当中。下图
48、就是调整之后的效果。 12 第 1章 响应式 Web设计基础 完成之后的页面在较小的屏幕上还和以前一样，只是在视口宽度大于50rem时，就会调整为新的布局。 以下是我们添加的布局样式： media screen and (min-width: 50rem) .IntroWrapper display: table; table-layout: fixed; width: 100%; .MoneyShot, .IntroText display: table-cell; width: 50%; vertical-align: middle; text-align: center; .IntroT
49、ext padding: .5rem; font-size: 2.5rem; text-align: left; 1.4 第一个响应式的例子 13 1 2 3 4 5 8 6 7 8 8 .Ingredients font-size: .9rem; float: right; padding: 1rem; margin: 0 0 .5rem 1rem; border-radius: 3px; background-color: #ffffdf; border: 2px solid #e8cfa9; .Ingredients h3 margin: 0; 还算不错，是吧？只用了少量代码，就让页面实现了对视口宽度变化的响应，为用户呈现了更实用的外观。有了这些媒体查询样式，在iPhone上我们看到的页面如下： 而在50rem宽时，页面效果如下： 14 第 1章 响应式 Web设计基础 添加更多装饰对我们理解什么是渐进增强并没有什么意义，因此这里就省略了。如果你想查看相关代码，可以解压下载的示例代码。 虽然这个例子本身很简单，但它已经涵盖了响应式Web设计的基本方法。 总结一下我们介绍的基本内容。首先是“基本的”样式，它适用于任何设备。在这个样式基础上，我们再为不同视口、不同能力的设备，渐进增加不同的视觉效果和功能。 CSS媒体查询的（3级）规范在这里：https:/www.w3.org/
个人主页
