响应式设计、改造与优化
- 书籍语言：简体中文
- 下载次数：5421
- 书籍类型：Epub+Txt+pdf+mobi
- 发布日期：2025-09-06
- 连载状态：全集
- 书籍作者：Phil
- 图书编号：9787121265129
- 运行环境：pc/安卓/iPhone/iPad/Kindle/平板
- 下载
内容简介
由于移动设备的大量使用，各种屏幕尺寸、各种操作系统、各种访问设备及各种需求均对用户体验提出了新的挑战。为了让我们的网站在各个终端上的用户体验都尽可能接近完美，我们需要采用响应式移动设计。本书重点介绍了Phil Dutson的开发经验，主要是关于移动设备及其设计，甚至一点点代码就可以帮助你以*好的方式为数百万手机用户提供内容；同时，顺便简单地介绍了一些主题，以解决常见的响应式移动设计中可能会遇到的问题。
目录
第 1部分 创建响应式部局
第 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
iPad80
iPhone.4S以下. ............................81
iPhone.5和 5S.............................82
Nexus.7（第二代）.......................82
Galaxy.S4....................................83
小结. .......83
第 7章 排版设计................................ 84
Web字体. ............................................85
字体格式.......................................85
TTF86
EOT86
WOFF..........................................86
SVG............................................87
浏览器和设备支持.................................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的解决方案
第 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
iPad80
iPhone.4S以下. ............................81
iPhone.5和 5S.............................82
Nexus.7（第二代）.......................82
Galaxy.S4....................................83
小结. .......83
第 7章 排版设计................................ 84
Web字体. ............................................85
字体格式.......................................85
TTF86
EOT86
WOFF..........................................86
SVG............................................87
浏览器和设备支持.................................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的解决方案
作者简介
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 时都向世界传播启蒙讯息。
下载地址
部分章节
响应式设计的概念来源于2010 年5 月Ethan Marcotte 发表的一篇名为“Responsive Web Design”的文章1，其阐述了如何利用流式布局、媒体查询和弹性图片三种公知技术创建一个能够适配不同分辨率屏幕的网站。Ethan Marcotte 认为应当利用Web 的特性来设计与开发网站：“我们可以将不同联网设备上众多的体验，当作同一网站体验的不同侧面来对待，而不要为每种设备进行单独剪裁使得设计彼此断开，这才是我们前进的方向。虽然我们已经能够设计出**的视觉体验，但还要把基于标准的技术也嵌入到我们的设计中去，这样才能使得我们的设计不仅灵活，而且能适应渲染它们的各种媒介。”响应式设计能够面向不同设备收拢并提供卓越的用户体验，并且这一方法不会忽视设备间的差异性，也不会强调设计师的控制权，而是选择了顺其自然并拥抱Web 的灵活性。
在移动互联的浪潮下，Luke Wroblewski *早提出了移动优先的设计理念2，而响应式设计之所以叫响应式“设计”而不叫响应式“技术”，就是因为它是一项设计先行的工作。面对移动互联网的蓬勃发展和用户习惯的悄然改变，从移动端开始进行响应式设计对习惯了PC 环境的设计师来说可能是一种挑战，需要从思考方式和工作习惯上做出改变。本书前半部分介绍了响应式移动设计的各个要素，并以实例分析如何对现有站点进行响应式移动设计的改造。
性能是响应式设计绕不开的一个话题，对于移动端来说尤为重要。按条件加载、隐藏或显示什么内容，都会比单一条件判断的代码结构烦琐，并影响用户体验及维护。尤其是在移动性能上，多样的设备具有复杂的使用环境，如何识别设备，并让用户在不同设备环境下均能得到良好体验，也是一根硬骨头。本书的后半部分重点对于上述问题进行了分析，希望对于读者的开发实践有所帮助。
*后，希望能有更多的人在移动端实践响应式设计，实践出真知，更加合理、优雅的设计可能就出自你的手中。
在移动互联的浪潮下，Luke Wroblewski *早提出了移动优先的设计理念2，而响应式设计之所以叫响应式“设计”而不叫响应式“技术”，就是因为它是一项设计先行的工作。面对移动互联网的蓬勃发展和用户习惯的悄然改变，从移动端开始进行响应式设计对习惯了PC 环境的设计师来说可能是一种挑战，需要从思考方式和工作习惯上做出改变。本书前半部分介绍了响应式移动设计的各个要素，并以实例分析如何对现有站点进行响应式移动设计的改造。
性能是响应式设计绕不开的一个话题，对于移动端来说尤为重要。按条件加载、隐藏或显示什么内容，都会比单一条件判断的代码结构烦琐，并影响用户体验及维护。尤其是在移动性能上，多样的设备具有复杂的使用环境，如何识别设备，并让用户在不同设备环境下均能得到良好体验，也是一根硬骨头。本书的后半部分重点对于上述问题进行了分析，希望对于读者的开发实践有所帮助。
*后，希望能有更多的人在移动端实践响应式设计，实践出真知，更加合理、优雅的设计可能就出自你的手中。