《响应式web设计》读书笔记(一)入门

  1. 云栖社区>
  2. 博客>
  3. 正文

《响应式web设计》读书笔记(一)入门

技术mix呢 2017-09-12 14:18:00 浏览1457
展开阅读全文

写在开始之前

  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,那就不适合使用。

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

结束语

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

 

本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/archive/2013/05/18/3085729.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
技术mix呢
+ 关注