具体描述
由于移动设备的大量使用,各种屏幕尺寸、各种操作系统、各种访问设备及各种需求均对用户体验提出了新的挑战。为了让我们的网站在各个终端上的用户体验都尽可能接近完美,我们需要采用响应式移动设计。《响应式设计、改造与优化》重点介绍了Phil Dutson的开发经验,主要是关于移动设备及其设计,甚至一点点代码就可以帮助你以最好的方式为数百万手机用户提供内容;同时,顺便简单地介绍了一些主题,以解决常见的响应式移动设计中可能会遇到的问题。
作者简介
Phil Dutson 是ICON Health & Fitness 客户端和移动执行解决方案的架构师。他是Sams Teach Yourself jQuery Mobile in 24 Hours、jQuery, jQuery UI, and jQueryMobile Recipes and Examples、The Android Developer’s Cookbook,2nd Edition 的作者。他热爱技术的学习和写作,每次他与儿子玩Ingress 时都向世界传播启蒙讯息。
目录信息
第 1章 内容事项. .................................. 2
构成内容的要素. ......................................3
信息采集.........................................3
信息确认.........................................5
选择合适的内容. ......................................7
内容性能.........................................7
搜索引擎优化考量..........................10
用户期望.......................................11
讨论内容滑块. .......................................12
小结. .......14
第 2章 为什么移动优先....................... 15
浏览 Web. ............................................16
从小尺寸开始时的注意事项. ....................19
网站主题.......................................20
网站导航.......................................22
营销图像.......................................24
网站搜索.......................................25
小结. .......27
第 3章 使用栅格................................ 28
选择栅格. ..................29
Pure.Grids...................................30
Bootstrap.....................................30
Foundation..................................31
Gridpak........................................31
Golden.Grid.System.....................32
Skeleton......................................32
使用响应式栅格. ....................................32
使用自适应栅格. ....................................36
两全其美...................38
小结. .......38
第 4章 显示表格数据.......................... 40
定义表格数据. .......................................41
联系地址列表. ................................41
发票和收据....................................41
表单..................41
配方和卡片....................................42
电子邮件站点和应用.......................42
使用表格数据. .......................................42
显示表单.......................................43
使用表格.......................................47
使用 CSS改变外观. .......................47
创建多个表格. ................................50
使用下载链接. ................................53
小结. .......56
第 5章 使用测量单位.......................... 57
使用像素. ..................58
使用百分比...........................................60
使用 em和 rem单位.............................63
viewport测量. ......................................65
小结. .......69
第 6章 使用媒体查询.......................... 70
viewport.meta标签..............................71
实现突变点...........................................73
使用媒体查询. ................................74
IE6-8浏览器支持. .........................80
设备专属的媒体查询..............................80
iPad..................80
iPhone.4S以下. ............................81
iPhone.5和 5S.............................82
Nexus.7(第二代).......................82
Galaxy.S4....................................83
小结. .......83
第 7章 排版设计................................ 84
Web字体. ............................................85
字体格式.......................................85
浏览器和设备支持.................................87
设备差异.......................................87
浏览器行为....................................89
提供 Web字体..............................91
使用字体服务. .......................................93
Google字体.................................93
Adobe.Typekit..............................94
Fonts.com...................................94
Font.Squirrel................................95
icon字体.............95
小结. .......96
第 8章 改造现有网站.......................... 97
选择一个合适的移动布局. .......................98
块级布局.......................................98
响应式布局..................................100
自适应布局..................................102
利用组件开展工作...............................103
导航...........................................103
搜索...........................................105
内容区域.....................................105
滑块...........................................106
链接...........................................107
移动化的注意事项...............................108
不要滥用悬停. ..............................108
点击呼叫.....................................109
模态窗口.....................................109
输入框........................................111
小结. .....112
第 2部分 使用响应式媒体
第 9章 响应式图片............................114
图片应该是响应式的............................115
图片分发.....................................115
使用 JavaScript的解决方案. ................125
Picturefill组件.. ...........................126
Pixity组件..................................127
小结. .....129
第 10章 响应式视频. ......................... 130
使用视频............................................131
分发系统............................................131
Limelight.网络.............................132
Akamai......................................133
Brightcove.................................133
Vimeo........................................134
YouTube....................................135
制作适配移动设备的视频. .....................136
使用固定比例. ..............................137
使用本地播放器...........................140
使用插件.....................................141
小结. .....142
第 11章 图像压缩............................. 143
图片类型............................................144
JPEG/JPG.................................144
GIF............................................146
PNG..........................................147
WebP........................................148
缩工具............................................150
JPEGmini...................................150
PNGGauntlet.............................151
图像优化工具 Radical..................151
ImageAlpha...............................151
ImageOptim...............................153
TinyPNG....................................153
压缩结果............................................154
小结. .....155
第 3部分 性能优化
第 12章 条件.JavaScript. ................ 158
为什么使用条件 JavaScript. .................159
滑块...........................................160
图片库........................................160
使用条件 JavaScript...........................162
JavaScript媒体查询....................163
使用 JavaScript插件..........................168
jRespond...................................168
mediaCheck...............................169
ConditionerJS............................169
小结. .....170
第 13章 Web组件............................ 171
使用 Web组件...................................172
Web组件示例....................................172
音频元素.....................................172
视频元素.....................................174
日期输入.....................................175
使用 DOM处理.. .................................176
Shadow.DOM............................177
使用模板.....................................178
编辑内容.....................................179
Web组件 Polyfill................................180
Polymer.....................................181
Polymer元素..............................181
X-Tag.......................................182
使用 Brick...................................183
小结. .....183
第 14章 设备检测与服务器请求. .......... 185
设备检测............................................186
使用脚本检测. ..............................186
读取 user-agent字符串. ..............188
实现设备数据库...........................190
HTTP头部. ........................................191
使用客户端提示. ..................................194
小结. .....196
第 15章 服务器优化. ..........................197
服务器配置.........................................198
Web.服务器.......................................198
Apache......................................198
Nginx.........................................199
IIS.199
Tomcat......................................200
NodeJS.....................................200
服务器插件.........................................201
SPDY........................................201
Cache........................................205
PageSpeed................................207
小结. .....210
第 16章 高性能与开发工具. ................. 211
开发工具............................................212
浏览器开发者工具...............................212
Chrome.开发者工具.. ...................212
Firefox.......................................218
Internet.Explorer........................223
构建工具............................................226
Grunt.........................................226
Gulp...........................................228
小结. .....229
· · · · · · (收起)
读后感
用户评价
这本书的封面设计简直是一场视觉盛宴,那种深邃的蓝色调配上简洁有力的字体,立刻抓住了我的眼球。我本来对技术类的书籍抱持着一种敬而远之的态度,总觉得会是枯燥乏味的公式和代码堆砌,但看到这本《响应式设计、改造与优化》的排版和插图,我立刻改变了看法。它不像那种硬邦邦的教科书,更像是一本精心制作的艺术品。尤其是其中穿插的那些复杂的布局图,用现代的几何图形表现出来,既直观又美观,让人在学习之余也能享受到阅读的乐趣。作者在内容组织上非常用心,从最基础的概念讲起,循序渐进地引导读者进入更深层次的实践。我特别欣赏它在介绍新旧技术交替时的那种哲学思考,而不是简单地罗列“这个新,那个旧”。这种深入浅出的讲解方式,让初学者也能轻松跟上节奏,而有经验的开发者也能从中找到新的启发点,思考如何将理论更好地融入实际项目。翻开书页,那种略带磨砂质感的纸张触感也让人心情愉悦,这无疑是提升阅读体验的一个重要细节,让人忍不住想要一页页地往下翻,探索其中蕴含的无限可能。
这本书的作者似乎对前端开发的“痛点”有着极其敏锐的洞察力,简直像是读懂了我们这些一线工作者的心声。我印象最深的是关于性能优化的那几个章节,里面详细拆解了几个我在实际工作中反复遇到的棘手问题:比如在处理低端设备时的资源加载冲突,以及如何在高分辨率屏幕上保持清晰度和加载速度的平衡。他没有给出那种“一招鲜吃遍天”的简单方案,而是提供了一套完整的思维框架,教会你如何根据具体的业务场景去“量体裁衣”。特别是对图片格式选择和懒加载策略的对比分析,那份详尽到近乎偏执的数据支持,让我对以往凭感觉做出的决策感到汗颜。我立刻拿书中的案例在我的项目中跑了一遍测试,效果立竿见影。这已经不是简单的技术指导了,更像是一场高水平的行业经验分享会,让人感觉自己站在了巨人的肩膀上,豁然开朗。这本书的价值,绝不是停留在“教你怎么做”,而是“教你如何思考和权衡”。
这本书的结构安排展现出一种罕见的逻辑美感。它不是简单地从A到Z的线性叙述,而更像是一个精心构建的生态系统。开篇的宏观视角迅速将读者带入“响应式”这个概念的本质,随后立刻进入到“改造”这一核心环节,这里涵盖了大量遗留系统的现代化策略,这正是许多中大型项目最头疼的地方。我发现自己在这部分找到了很多处理老旧项目的灵感,尤其是在渐进增强和特性检测的应用上,作者提供的方案兼顾了兼容性和前瞻性。然后,它自然而然地过渡到“优化”,不再是表面的加载速度,而是深入到用户体验的细微之处,比如触控反馈的优化、字体渲染的微调等。这种层次分明、环环相扣的结构,使得整本书读起来毫无压力,反而有一种层层剥茧、不断深入的满足感。读完之后,我感觉自己对整个响应式开发的生命周期有了一个全局的认识,从规划到维护,每一个环节都有了清晰的行动指南。
我向来对那种“理论先行,实践缺失”的教材深恶痛绝,但《响应式设计、改造与优化》在这方面做得堪称完美。它巧妙地在理论讲解的间隙穿插了大量的“实战演练”模块,这些模块不是简单的代码片段,而是完整的、可复现的场景模拟。我特别喜欢那些“挑战自我”的部分,作者会故意设置一个看似无解的布局难题,然后引导读者一步步拆解,找出最优解。这种互动式的学习体验极大地增强了知识的吸收效率。更难得的是,作者在讲解这些实践代码时,对每一个属性和值的选择都给出了详尽的解释——为什么用这个单位,而不是那个;为什么这个属性的优先级更高。这种对细节的极致关注,让原本晦涩难懂的CSS属性变得生动起来,仿佛每一个代码行都在向你讲述它的“生命故事”。这种将理论与实践无缝衔接的处理方式,让我在合上书本时,感觉自己的双手已经沾满了代码和汗水,而不是停留在纸面上空想。
与其他市面上同类书籍相比,这本书最大的亮点在于其超前的视野和对未来趋势的把握。很多响应式设计的书籍还停留在对Bootstrap或特定框架的依赖上,这本书却将重点放在了更底层的原理和CSS原生能力的挖掘上。比如,关于容器查询(Container Queries)的讨论,作者用极其精妙的笔触描绘了它将如何彻底改变组件化的开发模式,这种前瞻性在业内是相当罕见的。阅读这些内容时,我感觉自己不仅仅是在学习当前的技术栈,更像是在参与一场关于下一代网页构建方式的深度研讨。书中的语言风格非常沉稳、严谨,每一个论断都建立在扎实的实验数据和逻辑推导之上,几乎没有半点浮夸或炒作的成分。这使得我对书中的每一个结论都深信不疑,并且愿意花时间去实践和验证。它不仅仅是一本操作手册,更像是一本“方法论”的宣言,指导我们在快速迭代的技术浪潮中保持清醒和方向感。
只是提供做法。看书时老在想,现在还是这样的吗,有什么新进展吗
非常浅的介绍了响应式中的各类技术点,都是点一点,告诉你这样~,适合入门者,书定价好贵(89,彩印~我是图书馆借的,所以还好),可能是我想看更深入的实战,最佳实践吧~
太过泛泛,而且讲解得太过简单,多是一些思路~
太过泛泛,而且讲解得太过简单,多是一些思路~
只是提供做法。看书时老在想,现在还是这样的吗,有什么新进展吗