响应式Web设计 HTML5和CSS3实战[Responsive Web Design with HTML5 and]pdf

响应式Web设计 HTML5和CSS3实战[Responsive Web Design with HTML5 and] 内容简介

随着iPad mini的发布，又一个新的屏幕尺寸诞生了。用不着全面统计，你就会发现移动互联网时代众多的屏幕规格，从智能手机的3、4、5英寸，到平板电脑的7、8、9、10英寸，再到笔记本和台式机的13至30英寸，绝非目前单一的固定或流式布局所能应付。于是，响应式设计应运而生，而且它也将成为移动互联网时代前端设计与开发人员的一门必修课。

《响应式Web设计：HTML5和CSS3实战》堪称学习响应式Web设计的难得佳作。它不仅全面、细致、图文并茂地介绍了响应式设计相关的技术，比如媒体查询、流式布局、弹性媒体和弹性字体等，还把近几年来Web设计领域公认的设计理念有机地融入到了实例当中，比如移动先行（Mobile First）、渐进增强、平稳退化、无障碍设计等。更加难得的是，本书以设计跨屏幕的网页（响应式设计）为出发点，以点带面，把如今Web设计领域两大标准的新版本HTML5和CSS3也纳入其中，读者在掌握先进设计方法的同时也能掌握新的设计技术（比如使用新的HTML5结构化语义标记、嵌入媒体、响应式视频，以及CSS3的新选择器、特效、过渡、变形和动画等），从而可以免除重复学习新标准之苦，让自己一步跨入Web设计领域的前沿。无论你想学习响应式Web设计，还是学习HTML5和CSS3的实际应用，《响应式Web设计：HTML5和CSS3实战》都能满足你的需要，是毋庸置疑的明智之选。

说到底，响应式Web设计并非一门独立的技术，而只是现有技术的一个组合应用。只要有一点HTML和CSS基础的读者都能顺利地掌握它。对于中、高级的前端设计和开发人员，翻阅《响应式Web设计：HTML5和CSS3实战》也有助于理清自己的知识脉络，对这个新的设计理念获得更全面、深入的理解和把握。

响应式Web设计 HTML5和CSS3实战[Responsive Web Design with HTML5 and] 目录

第1章 　HTML5、CSS3及响应式设计入门

1.1 　为什么智能手机很重要（而老版的IE不再重要）

1.2 　响应式设计一定是最佳选择吗

1.3 　响应式网页设计的定义

1.4 　为什么要在响应式设计上停滞不前

1.5 　响应式网页设计示例

1.5.1 　下载视口调试工具

1.5.2 　在线创意源泉

1.6 　为什么HTML5很优秀

1.6.1 　省时省力

1.6.2 　新增了语义化标签元素

1.7 　CSS3为响应式设计和更多创新奠定了基础

1.7.1 　底线：CSS3不破坏任何东西

1.7.2 　CSS3如何解决日常设计问题

1.8 　看呐，不用图片

1.9 　HTML5和CSS3现在就能用吗

1.10 　响应式网页设计不是灵丹妙药

1.11 　引导客户：网站不必在所有浏览器中表现一致

1.12 　小结

第2章 　媒体查询：支持不同的视口

2.1 　现在就能使用媒体查询

2.2 　为什么响应式设计需要媒体查询

2.2.1 　媒体查询语法

2.2.2 　 媒体查询能检测那些特性

2.2.3 　用媒体查询改造我们的设计

2.2.4 　加载媒体查询的最佳方法

2.3 　我们的第一个响应式设计

2.3.1 　我们的设计是固定宽度的，不要惊讶

2.3.2 　响应式设计中要保证图片尽可能精简

2.3.3 　小视口下的内容剪切

2.4 　阻止移动浏览器自动调整页面大小

2.5 　针对不同视口宽度修正设计

2.6 　响应式设计中内容始终优先

2.7 　媒体查询只是必要条件之一

2.8 　小结

第3章 　拥抱流式布局

3.1 　固定布局经不起未来考验

3.2 　为什么响应式设计需要百分比布局

3.3 　将网页从固定布局修改为百分比布局

3.3.1 　需要牢记的公式

3.3.2 　设置百分比元素的上下文

3.3.3 　必须时刻牢记上下文

3.4 　用em替换px

3.5 　弹性图片

3.5.1 　让图片随视口缩放

3.5.2 　为特定图片指定特定规则

3.5.3 　给弹性图片设置阈值

3.5.4 　超级全能的max-width属性

3.6 　为不同的屏幕尺寸提供不同的图片

3.7 　流动网格布局和媒体查询的默契配合

3.8 　CSS网格系统

3.9 　小结

第4章 　响应式设计中的HTML5

4.1 　HTML5的哪些部分现在就能用

4.1.1 　大多数网站可以用HTML5编写

4.1.2 　腻子脚本和Modernizr

4.2 　如何编写HTML5网页

4.2.1 　HTML5的精简之道

4.2.2 　HTML5标签的合理写法

4.2.3 　伟大的标签万岁

4.2.4 　HTML的废弃零件

4.3 　HTML5的全新语义化元素

……

第5章 　CSS3：选择器、字体和颜色模式

5.1 　CSS3给前端开发人员带来了什么

5.1.1 　Internet Explorer 6到8对CSS3的支持

5.1.2 　使用CSS3设计和开发页面

5.2 　CSS规则解析

5.3 　私有前缀及其用法

5.4 　快速而有效的CSS技巧

5.4.1 　CSS3多栏布局

5.4.2 　文字换行

5.5 　CSS3的新增选择器及其用法

5.5.1 　CSS3属性选择器

5.5.2 　CSS3结构伪类

5.5.3 　对伪元素的修正

5.6 　自定义网页字体

5.6.1 　@font-face规则

5.6.2 　使用@font-face嵌入网页字体

5.7 　帮帮我，标题模糊怎么办

5.8 　新的CSS3颜色格式和透明度

5.8.1 　RGB颜色

5.8.2 　HSL颜色

5.8.3 　针对IE6、IE7和IE8提供备用颜色值

5.8.4 　透明通道

5.9 　小结

第6章 　用CSS3创造令人惊艳的美

6.1 　文字阴影

6.1.1 　HEX、HSL或RGB颜色都可以

6.1.2 　px、em或rem都行

6.1.3 　取消文字阴影

6.1.4 　制作浮雕文字阴影效果

6.1.5 　多重文字阴影

6.2 　盒阴影

6.2.1 　内阴影

6.2.2 　多重阴影

6.3 　背景渐变

6.3.1 　线性背景渐变

6.3.2 　径向背景渐变

6.3.3 　重复渐变

6.4 　背景渐变图案

6.5 　CSS3的响应性

6.6 　组合使用CSS3属性

6.7 　多重背景图片

6.7.1 　背景图片大小

6.7.2 　背景图片位置

6.7.3 　背景属性的缩写语法

6.8 　更多CSS特性

6.9 　可缩放图标：响应式设计中的完美选择

6.10 　小结

第7章 　CSS3过渡、变形和动画

7.1 　什么是CSS3过渡以及如何使用它

7.1.1 　过渡相关的属性

7.1.2 　响应式网站中的有趣过渡

7.2 　CSS3的2D变形

7.3 　尝试CSS3的3D变形

7.3.1 　分析3D变形效果

7.3.2 　3D变形尚未成熟

7.4 　CSS3动画效果

7.5 　小结

第8章 　用HTML5和CSS3征服表单

8.1 　HTML5表单

8.1.1 　理解HTML5表单中的元素

8.1.2 　placeholder

8.1.3 　required

8.1.4 　autofocus

8.1.5 　autocomplete

8.1.6 　list（及对应的datalist元素）

8.1.7 　HTML5的新输入类型

8.1.8 　日期和时间输入类型

8.2 　如何给不支持新特性的浏览器打补丁

8.3 　使用CSS3美化HTML5表单

8.4 　小结

第9章 　解决跨浏览器问题

9.1 　渐进增强与优雅降级

9.2 　该不该修复老版本IE

9.2.1 　统计数据（再看看世界的变化）

9.2.2 　个人选择

9.3 　前端的瑞士军刀：Modernizr

9.3.1 　使用Modernizr辅助修正样式问题

9.3.2 　使用Modernizr让老版本IE支持HTML5元素

9.3.3 　给IE6、7、8追加min/max媒体查询功能

9.3.4 　使用Modernizr按需加载资源

9.4 　必要时将导航链接转换为下拉菜单

9.5 　高分辨率设备（未来趋势）

9.6 　小结

响应式Web设计 HTML5和CSS3实战[Responsive Web Design with HTML5 and] 精彩文摘

在上述所有特性中，除scan和grid之外，都可使用min和max前缀来创建一个查询范围。例如，分析如下所示的代码片段：

@import url（”phone.css"） screen and （min-width:200px） and （max-width:360px）;

这里对width应用了min和max来设定查询范围。这样phone.css文件只会引入视口宽度介于200像素至360像素的显示屏设备。

2.2.3用媒体查询改造我们的设计

毫无疑问，你肯定知道CSS代表层叠样式表。所谓层叠，就是指样式表中后面的样式会覆盖前面相同的样式（除非前面的样式具有更高的针对性）。因此我们可以在样式表的开头设置基本样式，以便适应所有设计，然后使用媒体查询来进一步重写相应的部分。例如，先针对大视口设计（用户大多数情况下使用鼠标），将导航链接设计成简单的文字链接；然后再针对较小的视口，使用媒体查询重写这部分样式，为拇指一族提供更大的点击区域。

2.2.4加载媒体查询的最佳方法

现代浏览器虽然可以智能地忽略与自身不匹配的样式文件，但它却不一定不下载这些文件。因此，将不同媒体查询的样式保存到独立的文件中没有太大好处（个人喜好或为便于组织代码除外）。使用多个独立的文件会增加用于页面渲染的HTTP请求数量，从而导致页面加载变慢。

Respond.js是为Intemet Explorer 8及更低版本增加媒体查询支持的最快的JavaScript工具，但它目前无法解析CSS的@imp。rt命令。因此，建议在已有的样式表中追加媒体查询样式。使用如下语法即可在已有样式表中加入媒体查询：

@media screen .and （max-width: 768px） {／*样式*／}

2.3我们的第一个响应式设计

不知道你此刻怎么想，但我热切地渴望开始设计一个响应式网页！我们已经理解了媒体查询的原理，那就让我们试着驾驭它们，看看它们在实际工作中如何发挥作用。而且我正好有用来测试的项目。下面请允许我说点题外话……

我喜欢电影。但是，我常常发现自己和别人的观点不同（或许这就是我日复一日独居一室写代码的原因之一），尤其是关于什么是好电影什么是烂电影。每当奥斯卡奖提名宣布的时候，我经常会有一种强烈的恶心反胃感。我总觉得各种类型的电影都应获得嘉奖。