响应式设计 改造与优化 pdf epub mobi txt 电子书 下载 在线阅读 2026

编辑推荐

适读人群 ：论你是开发人员、设计师还是产品经理，本书都将教你为所有人的所有设备成功呈现信息的原则、技术和最佳实践。
不论你是正在积累还是精简你的技能集，《响应式设计、改造与优化》都是现代Web 实践的指南精粹。Phil 独一的技术背景和实战经验赋予了他对于底层核心程序以及像素级完美设计的敏锐洞察力。
— Web/UI 设计师Jacob R. Stuart

如今，Web 开发是不可能不考虑各种屏幕尺寸和比例因素的，因为你永远不会知道你的用户使用的是手机、平板电脑还是台式机。本书有助于构建响应式网页设计，是一本必读之书。
—9magnets LLC 联合创始人 Cameron Banga

任何一位寻找响应式设计综合性策略的读者不妨读一读本书。Phil 在这本实践指南中，揭开了为什么和怎样对众多的屏幕尺寸和设备进行响应式设计的面纱。
— WSOL 设计总监 Dennis Kardys

响应式设计的三要素（流动的网格、灵活的图像和媒体查询）仍然非常重要，今天创建一个网站比过去需要更多的思想和技术。本书将带你从基础开始，逐步了解现代Web 开发的来龙去脉。
— 圣母大学网络通信系主任 Erik Runyon

Phil Dutson 提出的移动设计的设计建议、资源和实例，有助于将设计师和开发者们联系在一起。本书是任何一位Web 设计师的书架上都值得拥有并需反复阅读的全面指南。
—SEO.com 网页设计师 Kaylee White

内容简介

由于移动设备的大量使用，各种屏幕尺寸、各种操作系统、各种访问设备及各种需求均对用户体验提出了新的挑战。为了让我们的网站在各个终端上的用户体验都尽可能接近完美，我们需要采用响应式移动设计。本书重点介绍了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
PureGrids30
Bootstrap30
Foundation31
Gridpak31
GoldenGridSystem32
Skeleton32
使用响应式栅格 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
viewportmeta标签71
实现突变点73
使用媒体查询 74
IE6-8浏览器支持 80
设备专属的媒体查询80
iPad80
iPhone4S以下 81
iPhone5和 5S82
Nexus7（第二代）82
GalaxyS483
小结 83
第 7章　排版设计 84
Web字体 85
字体格式85
TTF86
EOT86
WOFF86
SVG87
浏览器和设备支持87
设备差异87
浏览器行为89
提供 Web字体91
使用字体服务 93
Google字体93
AdobeTypekit94
Fontscom94
FontSquirrel95
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
Akamai133
Brightcove133
Vimeo134
YouTube135
制作适配移动设备的视频 136
使用固定比例 137
使用本地播放器140
使用插件141
小结 142
第 11章　图像压缩 143
图片类型144
JPEG/JPG144
GIF146
PNG147
WebP148
压缩工具150
JPEGmini150
PNGGauntlet151
图像优化工具 Radical151
ImageAlpha151
ImageOptim153
TinyPNG153
压缩结果154
小结 155
第 3部分　性能优化
第 12章　条件JavaScript 158
为什么使用条件 JavaScript 159
滑块160
图片库160
使用条件 JavaScript162
JavaScript媒体查询163
使用 JavaScript插件168
jRespond168
mediaCheck169
ConditionerJS169
小结 170
第 13章　Web组件 171
使用 Web组件172
Web组件示例172
音频元素172
视频元素174
日期输入175
使用 DOM处理 176
ShadowDOM177
使用模板178
编辑内容179
Web组件 Polyfill180
Polymer181
Polymer元素181
X-Tag182
使用 Brick183
小结 183
第 14章　设备检测与服务器请求 185
设备检测186
使用脚本检测 186
读取 user-agent字符串 188
实现设备数据库190
HTTP头部 191
使用客户端提示 194
小结 196
第 15章　服务器优化 197
服务器配置198
Web服务器198
Apache198
Nginx199
IIS199
Tomcat200
NodeJS200
服务器插件201
SPDY201
Cache205
PageSpeed207
小结 210
第 16章　高性能与开发工具 211
开发工具212
浏览器开发者工具212
Chrome开发者工具 212
Firefox218
InternetExplorer223
构建工具226
Grunt226
Gulp228
小结 229

精彩书摘

响应式设计的概念来源于2010 年5 月Ethan Marcotte 发表的一篇名为“Responsive Web Design”的文章1，其阐述了如何利用流式布局、媒体查询和弹性图片三种公知技术创建一个能够适配不同分辨率屏幕的网站。Ethan Marcotte 认为应当利用Web 的特性来设计与开发网站：“我们可以将不同联网设备上众多的体验，当作同一网站体验的不同侧面来对待，而不要为每种设备进行单独剪裁使得设计彼此断开，这才是我们前进的方向。虽然我们已经能够设计出最佳的视觉体验，但还要把基于标准的技术也嵌入到我们的设计中去，这样才能使得我们的设计不仅灵活，而且能适应渲染它们的各种媒介。”响应式设计能够面向不同设备收拢并提供卓越的用户体验，并且这一方法不会忽视设备间的差异性，也不会强调设计师的控制权，而是选择了顺其自然并拥抱Web 的灵活性。
在移动互联的浪潮下，Luke Wroblewski 最早提出了移动优先的设计理念2，而响应式设计之所以叫响应式“设计”而不叫响应式“技术”，就是因为它是一项设计先行的工作。面对移动互联网的蓬勃发展和用户习惯的悄然改变，从移动端开始进行响应式设计对习惯了PC 环境的设计师来说可能是一种挑战，需要从思考方式和工作习惯上做出改变。本书前半部分介绍了响应式移动设计的各个要素，并以实例分析如何对现有站点进行响应式移动设计的改造。
性能是响应式设计绕不开的一个话题，对于移动端来说尤为重要。按条件加载、隐藏或显示什么内容，都会比单一条件判断的代码结构烦琐，并影响用户体验及维护。尤其是在移动性能上，多样的设备具有复杂的使用环境，如何识别设备，并让用户在不同设备环境下均能得到良好体验，也是一根硬骨头。本书的后半部分重点对于上述问题进行了分析，希望对于读者的开发实践有所帮助。
最后，希望能有更多的人在移动端实践响应式设计，实践出真知，更加合理、优雅的设计可能就出自你的手中。

前言/序言

《代码的艺术：优雅的Web前端实现》 前言 在信息爆炸的时代，一个网站或应用的视觉呈现不仅仅是内容的载体，更是用户体验的核心。我们每天都在与各种各样的数字界面打交道，而那些能够抓住用户眼球、引导用户流畅交互的优秀设计，无一不是背后精湛代码艺术的体现。本书并非一本关于特定技术框架的速成指南，也不是对某种设计潮流的浅尝辄止，而是深入探讨构建现代、高效、且富有表现力的Web前端解决方案的底层逻辑与核心原则。 我们生活在一个设备多样化的世界，从巨幅的桌面显示器到小巧的智能手机，用户随时随地都在通过不同的屏幕访问互联网。这要求我们的前端开发不仅要考虑信息传达的清晰度，更要关注用户在任何尺寸设备上都能获得的愉悦体验。本书的目标，便是带领读者穿越代码的迷雾，理解并掌握那些能够让Web界面“活”起来的根本方法。 我们不会局限于“响应式”这个概念的表面，因为真正的精妙之处在于其背后驱动的思维方式和技术实现。本书将从基础的HTML结构语义化、CSS的布局与渲染机制出发，逐步深入到JavaScript的交互逻辑设计、性能优化策略，以及现代前端工程化工具链的应用。我们相信，只有扎实掌握了这些基础，才能在瞬息万变的技术浪潮中保持领先，创造出真正具有影响力的Web产品。 本书适合所有对Web前端开发怀有热情，并希望提升自身技艺的开发者。无论你是初涉此道的新人，还是在行业中摸爬滚打多年的资深工程师，我们都希望本书能为你提供新的视角，激发新的灵感，让你在构建Web应用时，能够更加游刃有余，写出更加优雅、高效、且富有生命力的代码。 第一章：HTML的灵魂——语义化的基石 在构建任何一个Web页面之前，我们首先需要思考的是它的骨架。HTML，作为Web内容的结构语言，其重要性不言而喻。然而，许多开发者常常将其视为简单的标签堆砌，忽略了其内在的“语义”价值。本书将深入剖析HTML的语义化原则，教会读者如何运用恰当的标签来描述内容的意义，而不仅仅是它的外观。 我们将详细讲解： 核心语义标签的精准运用： `

`, `