《高性能响应式Web开发实战》一第1章 概述及任务介绍

前 言 高性能响应式Web开发实战 为什么写这样一本书 作为一名程序员,写书也好,写博客也罢,其实都和写开源程序的性质是一样的,都是想要把自己的知识分享出去.分享是一件非常有成就感同时也是很快乐的事情,因为我们在此过程中会有很多新的想法,会迫不及待地想去实现,也会有很多人来和我们进行交流,探讨其他的一些可能性.最重要的是,对于做分享的人而言,做好分享很难!首先,分享者要对自己讲解的技术有足够的了解,不仅仅是了解如何用它,还要了解它的过去和未来:其次,分享者要能够娓娓道来,要站在受众的立场上考虑他

第2章 响应式中要面对的问题 高性能响应式Web开发实战响应式设计的主要工作就是要让网页适配当下种类繁多的设备,使页面在不同设备上仍然看上去友好并且可用.但是细想,当在设法让一个页面同时适配三星Galaxy S6和iPhone 6时,我们究竟是在适配什么?Galaxy S6和iPhone 6究竟存在哪些影响页面展现的差异因素?以上这些问题都可以归纳为:当谈论设备的时候我们究竟在谈论什么? 不同设备间的差异有很多种,我们不关心设备的制造厂商,不关心CPU功耗,不关心生产工艺,只关心会影响页面在屏幕

1.4 定义响应式 我们有没有可能采用一种最直接的方式,用一句话阐述响应式在前端开发中究竟代指哪些技术?如果非要往前追溯对响应式技术的定义,一定要谈alistapart[3] 网站上的被奉为经典的两篇文章,即<Responsive Web Design>[4]和<A Dao of Web Design>[5] . 在<Responsive Web Design>中,作者仅仅使用了流式布局(fluid layout)和媒体查询(media query)就完成了响应式页面的

2.2 CSS像素 上一节讲的像素密度和Web开发有什么关系?在我们编写样式代码时,常会用到另一个像素单位px.为了和设备像素区分开,我们把它称为CSS像素.如果说设备像素给我们的印象是机械的.固定的.物理的,那么CSS像素将会是灵活的.虚拟的.相对的. 为什么说它是相对的? 假设我在页面上画一个300 px宽度的块级元素.一般情况下,块级元素只相当于页面的部分宽度.如果使用浏览器的页面放大功能,10倍地放大页面,很快块级元素就会充满整个页面.但吊诡的是,此时我们既没有改变浏览器的宽度,也没有改

1.2 本书的线索 技术需要依靠产品来落地和彰显它的威力,否则再强悍的技术也只是象牙塔上小部分人的玩具而已.这就好比3A游戏大作对于游戏引擎的重要性(<孤岛危机>之于Cryengine,<战争机器>之于Unreal).再有,"纸上得来终觉浅,绝知此事要躬行",对古人如此,对程序员更是如此.学习技能和提升技能的最佳途径只有实践,开始使用学到的技术,并且遇到书本上从来就没有提及的困难,这才是进步的开始. 如果整本书每一章阐述的知识点相互独立,也就不能称之为书,至少不

1.1 为什么需要响应式设计 首先,我们先讲一下"为什么"需要响应式. 1.1.1 产品形态需要 我不想再谈论移动设备的增长趋势,也不需要强调用户每天花费多少时间在移动设备上,更不必用数字和图表告诉各位移动互联网形势如何好.毕竟每天各种互联网报告和科技媒体都在反复提醒着我们这些事情. 这里我们仅站在产品和技术的角度上思考,假设没有响应式设计,假设不区分移动与桌面用户,任由他们访问相同的桌面端页面,会有什么问题? 以大众点评网为例,如果你真的在手机上访问过站点的桌面版,那体验将会是灾难般

1.3 写作思路 大多数开发者在初学一门技术时常有的疑惑,用我常说的一个笑话来表达就是:当你把一个名词疑惑拿去向一个专家求解时,你的一个疑惑会变成三个疑惑,因为他会用另外两个你更加不了解的名词来解释这个名词. 上面的笑话也是我自己在为别人解释一些概念时常常陷入的怪圈.例如,你向一位非计算机专业的同学解释"在你输入网站地址的那一瞬间浏览器发生了什么"时,不免要牵扯到网络协议.浏览器引擎一类的专业词汇,而这些专业词汇又需要想方设法地用更通俗的概念进行讲解. 鉴于上述情形,本书采用与上述相反

2.4小结 本章的开头首先了解了关于屏幕PPI的定义,并引出了设备像素这个概念.虽然像素密度越高,能够表现的图像越细腻.但是,这一特性也需要开发者提供更高清的素材来支持,否则素材会显得模糊不堪. 随后提出了CSS像素的这个概念,并且梳理了CSS像素与设备像素之间的异同.通过CSS像素,能部分解决PPI在Web开发中的缺陷. 最后我们介绍了桌面端浏览器与移动设备浏览器在渲染页面时的差异,由此引出了视口(viewport)的概念,并学习了在移动浏览器上如何手动控制视口. 本书接下来的几章内容都与这些

1.5 本书任务 图1-5与图1-6给出的是本书中要完成的页面设计稿. 这是一位产品经理为本书而设计的.2015年年初sitepoint [6] 网站发布了一篇有关2015年网页设计趋势的文章<The Big Web Design Trends for 2015> [7] .文章中归纳了在2015年网页设计中将会出现的趋势性特征,如大气(make it big).简约(minimize).扁平设计(flat design),在这次设计稿中都得以体现. 图1-5所示为页面桌面端样式,图1-6所示