Let's play with HTML5 & CSS3!
-----------------------------------------------------转载原文--------------------------------------------------------------------------------
这本书的定位不是API手册，而是实战技巧，给我的感觉很像《无懈可击的web设计》的定位，同时也很像《DOM javascript编程艺术》的风格，用一个实际案例贯穿全书。虽然书名的主标题是“响应式Web设计”，但全书并非只讲响应式设计。它的主线是响应式设计，但穿插其中的，还有大量的html5标签和css3知识，没有js方面的知识。所以作者的身份更像是国内的css重构工程师。
摘一些印象深刻的点，结合我自己的思路分析一下吧：
1）响应式设计有两个基础条件，第一是设置viewport为device-width，第二是媒体查询。这是响应式布局的根基，就像css sprite的真相就是background-position一样，了解到这一点，响应式布局就成功了一半了。
媒体查询可以用来判断当前设备的窗口宽高、横竖屏等，相当于用css对当前设备写if、else。具体媒体查询的用法介绍可以看这里，很详细：http://dev.oupeng.com/articles/css3-conditional-intro
值得注意的是 @import url("xxx.css") screen and (min-width:xxx px) 这种写法。因为如果将不同分辨率下的样式单独写在一个文件里，使用动态加载的时，如果一个文件对应一个link标签，就需要加很多模块了。而如果将这些零散的模块都通过在主css文件中import进来，就只需要动态加载一个模块了，dirty的事情最好别暴露出来。
2）响应式布局需要找几个主流分辨率作为临界点，针对主流分辨率做出几个不同的版本。
这几个主流分辨率来自于你需要支持的终端：台式机、笔记本、iphone、ipad、android phone、android pad、winphone、黑莓等等等等。先确定你要支持哪些终端，再去搜集相关的数据，看看这些终端的分辨率和市场份额，最终确定出一份支持列表。这份支持列表应该是需要一直维护的，也许不用那么频繁，但应该不会有停下来的时候——移动终端的碎片化问题，你懂的，光一个android就够你受得了，更何况这么多设备。这个成本比定宽布局高出很多。
确定出这份支持列表后，需要将这些数据拿给设计师去设计几份不同的排版。这个过程中一定需要前端工程师和设计师进行较频繁的沟通，评估设计的可能性和性价比。这个成本比传统的定宽布局大很多。
设计图出来之后，前端需要将css布局分成两层，底层是各个分辨率通用的部分，其上需要写多个分支，分别对应不同的分辨率。开发和维护成本翻倍。
终上所述，响应式布局从设计到开发，各个环节的成本都比定宽布局高出很多。产品的开发时间会比原来开发定宽网站长很多，设计师和工程师的工作量都会大很多。这事，在实际操作中，估计只能在公司内从上至下推了，我猜大部分工程师不会希望给自己找这样的苦差事，就算工程师热衷于响应式布局这个新玩意儿，设计师们不见得喜欢。而这，并不是工程师一个人就能玩的。
3）流体布局。
流体布局最早是在《无》里介绍过，但因为并没有很强的市场需求，所以流体布局的概念只在前端圈子里受追捧过很短的一段时间，如果不是移动互联网的到来，流体布局已经几乎被遗忘了。而流体布局是响应式布局的必要组成部分，所以这次它又复活了。
流体布局其实也分两种，一种是固定一侧，让另一侧自适应，这个前些年流行的负边距布局很容易就能实现;另一种是两侧都自适应，按比例同时放大和缩小，这个就比较麻烦了。《响》这本书介绍的就是后者，具体来说它通过使用百分比这个单位来让所有元素的宽高都能自适应，包括字体大小，而不是简单地让长文本折行。
我个人其实并不太认同《响》的推荐，特别是看到所有单位都要经过一个除法之后才能得到最终结果值，而这结果值还是类似“margin-right:2.6595745%;”这么BT的数值，想想就头大。以后布局时，要时候把计算器打开。。。反正我是受不了。
我来做响应式布局，就会采用负边距布局的思路，固定一边的宽度，自适应另一边，然后所有的单位还是用px，不同的主流分辨率分支下，可能设置不同的尺寸，但一定是用px做单位的。
4）网络字体。
@font-face我一早就听说了，但@font-face遇到中文就哭了 T_T ，英文字体的话，字符翻来覆去就那么几个abcd和常用符号，但中文不同，中文的文字不是靠字母拼起来的，所以中文字体文件会特别大。所以之前看到网络字体这儿的时候，我总觉得这玩意儿遇到中国国情就直接忽略吧。
《响》介绍了@font-face的另一个用法，让我眼前一亮，这才觉得在中文环境下@font-face依然是个宝藏 —— 可以用网络字体来让字母看起来像个图标！icon小图标可以不再使用图片了，而且更妙的是，因为它事实上只是个字体，所以可以轻松地通过font-size改变它的大小，它是矢量的！不说废话了，看看这个网站就知道我在说什么了：http://fico.lensco.be/
另外，需要注意的是，使用@font-face时有可能字体会显得模糊，可以通过设置font-weight来解决。
5）使用线性渐变和径向渐变来生成背景图案。
单独使用线性渐变或单独使用径向渐变来做背景，没什么值得说的。但如果结合这两者，使用repeating-radial-gradient 可以生成非常漂亮的复杂背景！这些背景甚至可以代替一些平铺用的图片。让人意外的创意：http://lea.verou.me/css3patterns/
6）表单2.0的验证。
《响》的作者很高兴html5的表单2.0可以不通过js就完成表单的验证工作。但这点我持怀疑态度。第一，表单不一定是通过submit方式提交的，有可能是通过ajax或者websocket提交;第二，验证失败后的提示，无法自己定制，浏览器提供的是啥样就是啥样，类似于title属性的UI展现无法定制;第三，表单的验证似乎不是那么精准，去年我就做过相关的demo：http://hi.baidu.com/cly84920/item/ea0a0f7c343e29336e29f685
7）响应式布局案例网站 —— css工程师和设计师的灵感源泉。
网站重构刚兴起时，为了展示css布局的可能性，有个叫禅意花园的网站http://www.csszengarden.com/，收集了各种css作品，向外界展示css的威力。它是面向css工程师的。响应式布局也有个类似的网站http://mediaqueri.es/ ，它收集了一系列的响应式布局案例。响应式设计是个新概念，不同于css布局只是工程师们的技术革命，它同时影响着前端工程师和设计师。设计师们也需要灵感，什么地方可以怎么处理以让同一套图，用最小的成本适配于各种分辨率，同时保持主次分明，内容优先。
这个网站可以方便工程师和设计师们寻找灵感。在这个大家都在探索的阶段，有这么一个网站是特别重要的。
8）响应式布局不一定是答案。
就像作者在书中提到的，对于响应式布局有很多人持怀疑态度。包括我本人，对响应式布局也持怀疑态度，因为它的沟通和开发维护成本真的不低。响应式布局不一定是答案，至少不是唯一的答案。比如我做的这个项目，http://hi.baidu.com/cly84920/item/b29a8d4ec0fdc7f0dc0f6cd1 ，就没有使用响应式布局，而且我认为对于这个项目不使用响应式布局利大于弊。就像作者说的，用不用html5，用不用响应式设计，要“看情况”。
无论用不用吧，了解这种方法总是必要的，手上多一个武器，就多一种选择。
看完之后，给我的感觉就像当年看完《无》一样，感觉技术又要更新换代了。当年css2布局代替了table布局，在业界引起了一轮学习热潮和朝代更替。不愿跟进的同学，在几年后被淘汰了。现在css3和移动互联网，又带来了新的变化，很多东西和以前不一样了，不愿跟进的同学，在不久的将来会像当年坚持使用table布局的同学一样，被时代淘汰掉。历史总是惊人的相似，而且时代的变革不以人的意志为转移，要么跟进，要么淘汰，上了IT这条贼船的童鞋们，别挣扎了，学吧。唉。。。
----------------------------------------------------------------------------------------------------------------------------------------------------
原文地址：