学习响应式设计

第一部分响应式设计基础

第1章什么是响应式设计

1.1一点儿基础

1.2简史

1.3为什么是响应式设计

1.4总结

第2章响应式内容

2.1内容策略

2.2内容整理

2.3内容编写

2.4内容平等

2.5内容管理

2.6自适应内容

2.7总结

第二部分创建响应式网站

第3章响应式网站之HTML

3.1使用HTML

3.2页面基本结构

3.3视口

3.4结构性元素

3.5创建一个页面

3.6清晰和语义化的HTML

3.7总结

第4章响应式网站之CSS

4.1CSS 的工作方式

4.2CSS 版本

4.3置CSS 于何处

4.4层叠

4.5使用层叠

4.6注释

4.7组织你的样式表

4.8盒模型

4.9显示

4.10定位

4.11浮动和清除

4.12基本样式

4.13总结

第5章媒体查询

5.1何为媒体查询

5.2媒体查询结构

5.3在样式表链接中使用媒体查询

5.4使用媒体查询的其他方式

5.5我们可以查询什么

5.6浏览器支持

5.7断点

5.8设计范围

5.9响应式设计

5.10使用媒体查询

5.11两列布局

5.12设置最大宽度

5.13如何选择断点

5.14总结

第6章图像

6.1显示图像的方式

6.2替代文本

6.3图像文件格式

6.4优化图像

6.5内容图像

6.6背景图像

6.7响应式图像

6.8总结

第三部分玩转响应式设计

第7章响应式设计工作流程

7.1策略与规划

7.2内容先于布局

7.3考虑布局

7.4原型

7.5视觉设计

7.6响应式设计工具

7.7推销响应式设计

7.8与客户合作

7.9总结

第8章岂止手机

8.1用户体验

8.2设备无关的设计

8.3专注于移动优先

8.4尽你所能

8.5设备类型

8.6触摸

8.7屏幕尺寸

8.8可访问性（通用化设计）

8.9决定支持哪些设备

8.10为何要用真实设备进行测试

8.11测试

8.12总结

第四部分设计响应式网站

第9章文字排版

9.1始于HTML

9.2字型

9.3使用字体

9.4调整文字大小

9.5行长

9.6留白

9.7内边距和外边距

9.8为屏幕尺寸改变字型

9.9总结

第10章导航及页眉布局

10.1响应式导航

10.2网站品牌

10.3导航链接

10.4导航模式

10.5页眉

10.6总结

第11章性能

11.1性能的重要性

11.2性能作为设计元素

11.3网页加载与渲染方式

11.4性能测量

11.5清理代码

11.6将HTTP 请求减至最少

11.7服务器设置

11.8JavaScript

11.9CSS

11.10托管

11.11有条件地加载内容

11.12重绘与回流

11.13RESS

11.14总结

2007 年，iPhone 的发布对于网站设计来说是一个转折点，网站设计师们突然失去了对画布（我们在上面设计网站）的控制。此前，网站只是在显示器屏幕上供人浏览，尽管屏幕尺寸有所不同，但差别并不是那么大。而现在，我们怎样才能使网站在iPhone 这么小的屏幕上供人浏览呢？

在开始的一段时间里，我们制作了专门针对iPhone 屏幕尺寸进行了优化的移动网站，其独立于我们的“常规”网站。同时维护两个站点还不是那么糟，但大量不同屏幕尺寸的手机很快涌现出来，然后是平板电脑以及更小号的平板电脑，我们终于意识到不可能为每种可能的屏幕尺寸都制作一个网站。

我们需要一种适用于所有屏幕尺寸的解决方案，需要一种设计网站的方法，使网站能够自动适配各种显示屏幕。

一时间各种创意层出不穷，不久之后响应式网站设计脱颖而出。它是一种灵活的不依赖于固定屏幕尺寸的网站设计方法，能够检测屏幕的大小并调整设计，从而针对具体设备提供最佳的视觉体验。2010 年，Ethan Marcotte 在A List Apart 上首次发表了关于响应式网站设计的文章（https://alistapart.com/article/responsive-web-design）。

如其他新技术一样，响应式网站设计一开始并不被人接受，许多人不断辩称——甚至于现在某些人还在这么做——我们需要为手机单独创建网站。但随着今天市场上设备的激增，很明显，我们不能依赖于一种手机模型并将其作为设计标杆。我们的设计要能够适应所有设备，而这些设备的屏幕尺寸各不相同。

而与此同时，响应式设计也在不断发展。它不再仅仅是适应屏幕尺寸，也能适应不同的设备性能，如触摸屏、视网膜显示屏，以及慢速连接。

在2014 年，58% 的美国成年人拥有一部功能丰富并允许用户完全访问网络的智能手机，这些手机搭载了iOS、Android、Windows Phone 等操作系统，1 且35% 的美国成年人拥有一部平板电脑。2 我们有令人惊叹的硬件设备，而响应式设计能帮助我们充分利用网络。

然而，尽管大多数美国成年人都有智能手机，但仍有32% 受访者的手机不是智能手机。这之中的很多人用手机访问网络时只能使用功能受限的浏览器，这种浏览器无法如他们希望的那样显示所有网站。响应式网站设计也是这种情况下的一种解决方案。

响应式网站设计一开始只是设计简单的、注重内容的站点（不依赖CSS 或JavaScript），使其能显示在几乎所有的联网设备上。在此基础之上，这种设计通过渐进式增强——响应式网站设计正是基于此——针对具体的显示屏尺寸以及设备功能进行优化。因而，功能手机（也即功能有限的旧式手机）只能获得那些它们能使用的内容，而相对来说较新的智能设备所访问的网站则具有丰富的设计、完美适配其屏幕的界面，设备功能被充分利用。

响应式网站设计使我们有能力为所有用户呈现最好的网站，而不管他们具体使用什么设备。网络对每个人应该都是可用的，而响应式设计将指导我们做到这一点。

创建响应式网站并不仅仅是学习几段新代码那么简单。它还包括重新审视网站构想方式，关注用户体验，并确保内容和功能不是在设计完成之后才加上去的。

我们还必须改变网站制作方式，过渡到一个涉及设计师、开发者和其他团队成员的更具协作性的过程中去。

我们需要学习一些新的代码，但响应式设计并不是一种新的编程语言，创建一个响应式网站只需要HTML、CSS，有时再加点JavaScript。如果你已经知道如何制作网站，那么本书中讲到的大部分内容对你来说都会很熟悉。你需要记住，在创建一个响应式网站时，90%的工作与创建非响应式网站时是一样的。但除了增加少许新技术，你需要掌握正确的基础知识，使用结构恰当、合乎规范的标记（HTML 和CSS）。如果没有坚实的基础，你难以确信自己的网站能正确工作并在各种设备上恰当地显示。

如果你从事与建设网站相关的工作，不管是一名Web 设计师、开发人员、内容策划、用户体验设计师、网站负责人、IT 主管，还是从事其他任何涉及创建和维护网站的工作，你都将从本书中知晓：响应式设计的工作原理、怎样调整自己的工作流程以适应响应式设计，以及如何创建对任何设备都能提供最佳设计与用户体验的响应式网站。

……