《响应式web设计》读书笔记（一）入门

写在开始之前

2013年的夏天，我算是正式加入了前端开发的队伍，作为一名新手，关注了很多知名网站、牛人博客，时时刻刻感觉要学的东西太多太多，一路不断的收藏收藏，攒了好多文章来看，心里还想着在前端世界里，我不知道的东西还有多少呢？css布局很熟了吗？没有。js框架呢？没用过多少。自己想写个插件什么的吗？想。响应式设计呢？同样重要。用户体验相关的东西？也想沾边。哇，要学的好多好多呀。于是手头的也看不进去了，又去收藏别的东西。。。一时间感觉自己浮躁了。不行呀，得想个办法让自己沉稳下来，于是我决定，精读一本书，并写读书笔记，不求速度有多快，但求让心境不那么浮躁，一点一点积累，直到形成良好习惯。向牛人靠拢！

我所要看的这本书，全名为《Responsive Web Design with HTML5 and CSS3》，作者：Ben Frain【英国】。译者：王永强。中文书名《响应式web设计—HTML5和CSS3实战》。书名确实长了点。鉴于封面上画一只七星瓢虫，我姑且叫它瓢虫书好了~

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

正如标题一样，第一章主要讲了些入门相关的知识，没有多少技术性讲解，只是带读者走进响应式设计的大门。相关的内容较零散，下面，我将以序号罗列一下这些观点。

①兼容智能手机很重要

作者给出了一份统计数据，至2011年7月，全球手机浏览器的使用量为7.02%，IE6的使用率降到了3.42%，IE7的使用率也降到了5.45%。如果你是一名前端开发人员，看到这个数据估计激动的不敢相信自己的眼睛了吧，而且，还是2011年的数据哟。不过先不要高兴的太早，让我们看看国内的情况，以下是来自百度流量研究院的截图：

什么？！IE6还有18%之多，哎，不得不接受这个事实，中国网民拖了全球的后腿呀。不过，如果你比较乐观，你还会看到下面的chrome变化趋势，稳步上升呀。还好还好，不管近况如何，总之前途是光明的。所以网站的页面要支持移动设备，也必然是未来的一个趋势。

②响应式设计是否是最佳选择

支持移动设备就一定要响应式页面吗？好，举个例子，你肯定用手机或是平板登陆过新浪首页或是其他网站吧，让我猜猜你的样子：撑着两个手指在屏幕上，时而放大，时而缩小，往左拖、往右拖，哎呀，不小心点到了一个链接，跳走了……好了，不继续说了，作者的观点也在于此处，如果你想要做竞争力更强的产品，如果你想要打造更好的用户体验，响应式设计绝对是首选的好方案。

另外作者也还有一个观点，那就是，如果预算和时间充分，可以直接打造一个手机版的网站。

③响应式设计的由来和定义

响应式网页设计，英文名称：Responsive Web Design，由伊桑·马科特提出，其实质是把三种已有的开发技巧整合起来，包括弹性网格布局、弹性图片、媒体和媒体查询。（你想起ajax了吗）但它包含的内容页不仅仅限于此，它是要从整体上颠覆当前网页设计的方法，马科特如是说。看吧，重量级的东西远不是这几种技术，而是一种设计思想，只要能想出巧妙的办法，让你的网页在不同设备上完美呈现，我觉得这就算响应式设计。

另外的一个观点不得不提，作者认为，在进行响应式设计的时候，首先应该针对小屏幕设备设计，然后逐步增强针对大屏幕的设计。这就是所谓的“渐进增强”，已经得到了很多专业人士的认可。

④关于视口调试工具

如果你是开发者，可能需要在自己的电脑上模拟移动设备，这里有几款针对不同浏览器的插件：（链接我就不敲了）

IE下可以使用Microsoft Internet Explorer Developer Toolbar

Safari下可以使用Resize，不过是收费的。当然还有一个免费版本的，叫ResizeMe

Firefox下可使用Firesizer

chrome下可使用Window Resizer

不要想象的过于神奇，其实这些插件无非是帮你精确调整浏览器的窗口大小。

⑤优秀网站示例

http://thinkvitamin.com

http://2011.dconstruct.org

⑥HTML5和CSS3带来的机会

使用HTML5的语义化标签的好处不必再提，我自己切身感受到的一点是，有时候自己写好页面，需要交给后台人员处理，而那个所谓后台人员呢，藐视前端人员，随意改你的标签，然后改坏了吧，还把页面拿来给你看，“你看看这个<div>标签是跟哪个配对来着……”，这种情况想必很多人都遇到过，就是时间长了一个页面没很多人改过，标签都不匹配了。如果使用语义标签呢，把<div class="article"></div>换成<article></article>，好了，妈妈再也不用担心我找不到匹配标签了。

CSS3，似乎被HTML5的光芒给遮盖了，但它其实才是响应式设计的主力。使用CSS3的一些新特性，如圆角、渐变、动画等，可以取代原有需要背景图片或者js才能实现的效果，从而实现更好的自适应效果。

那么，如何正确的取舍HTML5和CSS3呢？作者给出如下观点：

·如果想支持互联网用户增长最迅猛的市场，那么适合使用。

·如果想要更简洁、快速、易于维护的代码，那么适合使用。

·如果用户可以接受不同的浏览器下界面显示会有不同，那么适合使用

·如果客户要求所有浏览器下表现一致，那么就不适合使用

·如果用户群体有百分之七十以上使用低版本IE，那就不适合使用。

最后作者也再次重申，如果预算运行，那么专门定制一个移动版的网址是更好的选择。

结束语

第一次写读书笔记，手法明显生疏，幸好第一章只是入门的介绍，没有多少关键知识。就拿这一章练手吧~

 

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>