《响应式Web设计实践》：前端+后台=响应式

《响应式Web设计实践》是一本关于响应式Web设计的书，虽然之前也有构建响应式站点的经验（比如http://z.qzone.com）仔细读完全书，才知道响应式不只是media query这么简单。

本书内容非常丰富，下面介绍一些对我有所帮助的章节：

3.4 媒介查询顺序

我之前的制作经验是“优雅降级”型的，先制作一个完整的站点，在Chrome、IE中都能完整查看了，然后再往下增加一些断点，比如640px、320px等，在这些断点中新增样式来覆盖之前的完整样式，或者隐藏一些元素，但这样的缺点是不支持媒体查询的手机浏览器就只能读取完整站点样式了。而且因为做了restyle，整体代码量会偏大。

所以本书的经验“渐进增强”，先制作一个核心站点样式，这个样式中没有负责布局的样式，没有左右栏，就是简单的核心样式。然后在媒体查询中往上增加一些断点，比如320px、640px等，在这些断点中新增样式来增加布局样式，这样就免掉了之前的缺点。

最后桌面端的IE678不认识media query，所以需要用IE条件注释加载一个单独的样式：

<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->

我根据这一原则和方法修改了我的博客的响应式实现方法，大家可以看看源码。

3.6 确定断点

这一节的观点是，新增的断点不应该由主流设备宽度来决定，应该由内容来决定，也就是说新增一个480的站点不应该是因为手机屏幕宽度很多都是480px，而应该是在481px的时候就能够有所调整了。

这个观点很好，让我们从被动地设置断点，到拥有主动权。

P102 响应式设计对性能的影响

Guy介绍了一下“前端的响应式设计”的弊端，大多数简单的前端处理的响应式有以下弊端：

1. 下载并隐藏
2. 下载并缩小
3. 额外的DOM

这3个问题在比如http://z.qzone.com中几乎都存在，手机端下载了跟桌面端一样的HTML代码【问题3】，然后隐藏了一些下载功能【问题2】，最后把幻灯图缩小到手机屏幕大小【问题1】。

但是这样也是有原因的，因为首页图经常需要运营来修改，设计师也没有资源出一系列大图的时候，再专门针对手机做一系列小图，所以当时的方案是简单缩小。

当然以后有机会一定会去优化，做出更好的体验。

4.5 背景图片

利用媒体查询，在屏幕大于一定宽度的浏览器中才加载自定义字体。

4.7.2 广告

广告真的是一个很大的阻力，空间改版的时候想修改边栏宽度，就遇到广告位的阻力……也许以后可以跟商户签订更灵活的协议。

7.5.1 代码汤

不知道原文是什么，这里翻译成代码汤，有点奇怪，但意思大概是懂了，就是页面上的富文本CMS生成了很多冗余标签，冗余标签储存在数据库中，然后在移动端生成内容的时候就有诸多困难。

解决办法是简化CMS，同时在编辑器中做一个简单内容拷贝，或者过滤器过滤标签。

8.2.2 服务器端Modernizr

浏览器段的Modernizr我们都了解，是通过在浏览器里运行JavaScript来判断浏览器的能力，然后在html标签上附加一些标记class。

服务器端Modernizr的原理有所不同，访问者第一次访问页面时（不带cookie），JavaScript会立刻执行并取得测试的结果，然后这些结果被添加到cookie，页面立刻刷新。当下一次加载页面时，服务器端会读取cookie值，然后直接输出html。

缺点是JavaScript可能禁用，或者浏览器压根就不支持JavaScript，而且要加载两次（虽然第一次数据量很少，也是一次请求）。

优点是不必依赖UA字符串，更稳定。

9.2 网络

测试网络的方法之一是发起某个图片的请求，然后测试下载时间，根据这个来考虑是否需要加载更高分辨率的图片，

方法之2是网速API，但其实并不太稳定，一方面不是所有设备都有这个API，另一方面不一定3G就更快。

响应式不简单是前端的责任（media query），也不简单是后台的责任（单独的m.站点），而是二者统一，后端来输出不同的内容，前台来按需加载图片，来做断点。

设计师也需要了解前端知识，因为未来的主流趋势是设计师在浏览器中设计。

本书有一些小问题，比如：

P38边栏的链接中有空格，其实url中不能有空格的吧。

第8章原章节名字可能确实是RESS，但中文书里这样写太奇怪了，这并不算约定通俗的缩写，让人云里雾里，简单的“服务器端检测”就非常好了。

另外不喜欢（译注：）这样的文字插入到正文中，应该用脚注或者边栏注可能更好。

整体来说翻译的不赖，译者的自我评价（原文5星，翻译3星）过谦了，我打5星。

我写字的地方迁移到公众号啦~欢迎关注我的公众号：余果专栏