学习响应式设计 pdf epub mobi txt 电子书 下载 2025

简体网页||繁体网页

☆☆☆☆☆

[美] 彼得森（Clarissa Peterson） 著，文巍 译

图书标签:

• 响应式设计
• 前端开发
• Web开发
• CSS3
• HTML5
• 移动优先
• 用户体验
• 网页设计
• 自适应布局
• 前端框架

出版社： 人民邮电出版社

ISBN：9787115389732

版次：1

商品编码：11696213

包装：平装

丛书名： 图灵程序设计丛书

开本：16开

出版时间：2015-06-01

用纸：胶版纸

页数：308

正文语种：中文

编辑推荐

　　全面覆盖从项目立项到网站上线的工作流程　　详细讲解响应式设计策略和技巧，为各式设备打造极优的用户体验　　充分利用渐进增强优化用户体验　　不仅面向Web开发人员，适合从事网站相关工作的各类人群阅读参考

内容简介

　　《学习响应式设计》分为四部分，全面介绍响应式Web设计策略与技术，引领大家掌握从项目立项到网站上线的响应式设计工作流程。首先介绍响应式设计及其与其他网页设计方法的区别。第二部分概述构建响应式站点的基础知识、需要掌握HTML和CSS知识、图像处理，以及响应式设计的核心：媒体查询。第三部分带大家全面了解响应式设计的工作流程，从用户体验的角度探讨响应式设计，确保网站在各种设备上的适应性和功能完备性。

作者简介

　　Clarissa Peterson，用户体验设计师、Web开发人员，响应式网站设计咨询公司Peterson/Kandy（位于蒙特利尔）联合创始人。她经常在开发者会议及研讨会上发表关于响应式设计、移动策略和用户体验方面的演讲。

内页插图

精彩书评

　　★本书内容非常全面而又不失深度，对响应式Web设计的各种概念和理论给出了极棒的阐释！”　　——Tom Barker，美国康卡斯特公司软件工程与研发部总监

　　★“这本书的内容对初学者的知识体系是一个很好的补充，他们将通过本书学会创建更简洁、更具访问性和功能性的网站。Clarissa的讲解深入浅出，且不失时机地用大量示例阐明设计策略与技巧，其中的设计建议和极好实践对于专业开发人员具有很好的参考价值。”　　——读者评论

　　★“它不仅可以帮助Web设计师更新旧有思维方式和知识储备，说服客户更新甚或摒弃旧有网站重新设计，而且可以帮助不甚了解编码的项目经理理顺其在程序员、设计师与客户间的沟通……”　　——读者评论

目录

第一部分　响应式设计基础

第1章　什么是响应式设计

1.1　一点儿基础

1.2　简史

1.3　为什么是响应式设计

1.4　总结

第2章　响应式内容

2.1　内容策略

2.2　内容整理

2.3　内容编写

2.4　内容平等

2.5　内容管理

2.6　自适应内容

2.7　总结

第二部分　创建响应式网站

第3章　响应式网站之HTML

3.1　使用HTML

3.2　页面基本结构

3.3　视口

3.4　结构性元素

3.5　创建一个页面

3.6　清晰和语义化的HTML

3.7　总结

第4章　响应式网站之CSS

4.1　CSS 的工作方式

4.2　CSS 版本

4.3　置CSS 于何处

4.4　层叠

4.5　使用层叠

4.6　注释

4.7　组织你的样式表

4.8　盒模型

4.9　显示

4.10　定位

4.11　浮动和清除

4.12　基本样式

4.13　总结

第5章　媒体查询

5.1　何为媒体查询

5.2　媒体查询结构

5.3　在样式表链接中使用媒体查询

5.4　使用媒体查询的其他方式

5.5　我们可以查询什么

5.6　浏览器支持

5.7　断点

5.8　设计范围

5.9　响应式设计

5.10　使用媒体查询

5.11　两列布局

5.12　设置最大宽度

5.13　如何选择断点

5.14　总结

第6章　图像

6.1　显示图像的方式

6.2　替代文本

6.3　图像文件格式

6.4　优化图像

6.5　内容图像

6.6　背景图像

6.7　响应式图像

6.8　总结

第三部分　玩转响应式设计

第7章　响应式设计工作流程　

7.1　策略与规划

7.2　内容先于布局

7.3　考虑布局

7.4　原型

7.5　视觉设计

7.6　响应式设计工具

7.7　推销响应式设计

7.8　与客户合作

7.9　总结

第8章　岂止手机

8.1　用户体验

8.2　设备无关的设计

8.3　专注于移动优先

8.4　尽你所能

8.5　设备类型

8.6　触摸

8.7　屏幕尺寸

8.8　可访问性（通用化设计）

8.9　决定支持哪些设备

8.10　为何要用真实设备进行测试

8.11　测试

8.12　总结

第四部分　设计响应式网站

第9章　文字排版

9.1　始于HTML

9.2　字型

9.3　使用字体

9.4　调整文字大小

9.5　行长 　

9.6　留白

9.7　内边距和外边距

9.8　为屏幕尺寸改变字型

9.9　总结

第10章　导航及页眉布局

10.1　响应式导航

10.2　网站品牌

10.3　导航链接

10.4　导航模式

10.5　页眉

10.6　总结

第11章　性能

11.1　性能的重要性

11.2　性能作为设计元素

11.3　网页加载与渲染方式

11.4　性能测量

11.5　清理代码 　

11.6　将HTTP 请求减至最少

11.7　服务器设置

11.8　JavaScript

11.9　CSS

11.10　托管

11.11　有条件地加载内容

11.12　重绘与回流

11.13　RESS

11.14　总结

精彩书摘

　　2007 年，iPhone 的发布对于网站设计来说是一个转折点，网站设计师们突然失去了对画布（我们在上面设计网站）的控制。此前，网站只是在显示器屏幕上供人浏览，尽管屏幕尺寸有所不同，但差别并不是那么大。而现在，我们怎样才能使网站在iPhone 这么小的屏幕上供人浏览呢？

　　在开始的一段时间里，我们制作了专门针对iPhone 屏幕尺寸进行了优化的移动网站，其独立于我们的“常规”网站。同时维护两个站点还不是那么糟，但大量不同屏幕尺寸的手机很快涌现出来，然后是平板电脑以及更小号的平板电脑，我们终于意识到不可能为每种可能的屏幕尺寸都制作一个网站。

　　我们需要一种适用于所有屏幕尺寸的解决方案，需要一种设计网站的方法，使网站能够自动适配各种显示屏幕。

　　一时间各种创意层出不穷，不久之后响应式网站设计脱颖而出。它是一种灵活的不依赖于固定屏幕尺寸的网站设计方法，能够检测屏幕的大小并调整设计，从而针对具体设备提供最佳的视觉体验。2010 年，Ethan Marcotte 在A List Apart 上首次发表了关于响应式网站设计的文章（http://alistapart.com/article/responsive-web-design）。

　　如其他新技术一样，响应式网站设计一开始并不被人接受，许多人不断辩称——甚至于现在某些人还在这么做——我们需要为手机单独创建网站。但随着今天市场上设备的激增，很明显，我们不能依赖于一种手机模型并将其作为设计标杆。我们的设计要能够适应所有设备，而这些设备的屏幕尺寸各不相同。

　　而与此同时，响应式设计也在不断发展。它不再仅仅是适应屏幕尺寸，也能适应不同的设备性能，如触摸屏、视网膜显示屏，以及慢速连接。

　　在2014 年，58% 的美国成年人拥有一部功能丰富并允许用户完全访问网络的智能手机，这些手机搭载了iOS、Android、Windows Phone 等操作系统，1 且35% 的美国成年人拥有一部平板电脑。2 我们有令人惊叹的硬件设备，而响应式设计能帮助我们充分利用网络。

　　然而，尽管大多数美国成年人都有智能手机，但仍有32% 受访者的手机不是智能手机。这之中的很多人用手机访问网络时只能使用功能受限的浏览器，这种浏览器无法如他们希望的那样显示所有网站。响应式网站设计也是这种情况下的一种解决方案。

　　响应式网站设计一开始只是设计简单的、注重内容的站点（不依赖CSS 或JavaScript），使其能显示在几乎所有的联网设备上。在此基础之上，这种设计通过渐进式增强——响应式网站设计正是基于此——针对具体的显示屏尺寸以及设备功能进行优化。因而，功能手机（也即功能有限的旧式手机）只能获得那些它们能使用的内容，而相对来说较新的智能设备所访问的网站则具有丰富的设计、完美适配其屏幕的界面，设备功能被充分利用。

　　响应式网站设计使我们有能力为所有用户呈现最好的网站，而不管他们具体使用什么设备。网络对每个人应该都是可用的，而响应式设计将指导我们做到这一点。

　　创建响应式网站并不仅仅是学习几段新代码那么简单。它还包括重新审视网站构想方式，关注用户体验，并确保内容和功能不是在设计完成之后才加上去的。

　　我们还必须改变网站制作方式，过渡到一个涉及设计师、开发者和其他团队成员的更具协作性的过程中去。

　　我们需要学习一些新的代码，但响应式设计并不是一种新的编程语言，创建一个响应式网站只需要HTML、CSS，有时再加点JavaScript。如果你已经知道如何制作网站，那么本书中讲到的大部分内容对你来说都会很熟悉。你需要记住，在创建一个响应式网站时，90%的工作与创建非响应式网站时是一样的。但除了增加少许新技术，你需要掌握正确的基础知识，使用结构恰当、合乎规范的标记（HTML 和CSS）。如果没有坚实的基础，你难以确信自己的网站能正确工作并在各种设备上恰当地显示。

　　如果你从事与建设网站相关的工作，不管是一名Web 设计师、开发人员、内容策划、用户体验设计师、网站负责人、IT 主管，还是从事其他任何涉及创建和维护网站的工作，你都将从本书中知晓：响应式设计的工作原理、怎样调整自己的工作流程以适应响应式设计，以及如何创建对任何设备都能提供最佳设计与用户体验的响应式网站。

　　……

前言/序言

网页的无限可能：拥抱灵动自适应的用户体验 在信息爆炸的时代，内容的传递方式早已超越了传统的固定屏幕。从握在手中的智能手机，到宽阔的电脑显示器，再到未来可能出现的各种新奇设备，用户访问网络的入口变得越来越多元。这意味着，我们的网页设计也必须随之进化，不再拘泥于单一的尺寸和布局。 《网页的无限可能：拥抱灵动自适应的用户体验》并非一本关于具体技术实现的书籍，它更侧重于构建一种设计理念和思维模式，引导开发者和设计师们跳出固有的框架，深刻理解并实践“灵动自适应”的设计哲学。这本书的核心在于，我们如何能够创造出真正以用户为中心的、能够在任何设备上都提供流畅、直观且美观体验的网页。 核心理念：用户体验至上，响应式是手段而非目的 我们常常将“响应式设计”挂在嘴边，但这本书会挑战这种流于表面的理解。它认为，响应式设计只是实现“灵动自适应用户体验”的一种强大工具，而其最终目标，是让用户无论身处何种场景、使用何种设备，都能轻松愉悦地获取所需信息、完成预期任务。这意味着，我们不能仅仅是为了“适配屏幕”而进行调整，而是要深入思考： 用户在不同设备上的真实使用场景是什么？ 手机用户可能在行走中、匆忙间访问，他们需要快速获取关键信息；平板用户可能更倾向于轻松浏览、阅读长文；桌面用户则拥有更宽广的操作空间，可以处理更复杂的功能。 不同设备的交互方式有何差异？ 触摸操作的精度、鼠标滚动的便捷性、键盘输入的效率，这些都直接影响着界面的设计。 内容在不同尺寸屏幕上的呈现优先级如何变化？ 哪些信息必须被优先展示，哪些可以被隐藏或折叠，才能在有限的空间内最大化信息的传达效率？ 《网页的无限可能》会带领读者层层剥开这些问题，从宏观的策略到微观的细节，全面审视如何构建真正以用户为中心的设计。 第一部分：转变思维——从“固定”到“流动”的认知升级 在数字世界的早期，网页设计很大程度上是围绕着桌面电脑的固定分辨率进行的。这种思维模式，即“固定布局”，为我们带来了稳定但缺乏灵活性的设计。本书将首先帮助读者打破这种惯性思维，认识到“流动性”和“自适应性”的重要性。 告别像素迷恋，拥抱相对单位： 我们将探讨使用百分比、em、rem等相对单位在布局和排版中的优势，理解它们如何能够随着屏幕尺寸的变化而动态调整，而非僵硬地固定。 网格系统的新思考： 传统的网格系统虽然有用，但在应对高度动态的响应式需求时，可能需要更灵活的框架。本书将介绍一些更具弹性的网格设计理念，以及它们如何帮助我们构建既有序又灵活的布局。 内容优先的原则： 真正的灵动设计，其核心是围绕内容展开的。我们会强调如何识别并定义页面的核心内容，并围绕这些内容来构建能够优雅适应各种屏幕的布局，而不是强行将固定布局“塞”进不同的屏幕尺寸。 第二部分：策略与架构——构建响应式设计的基石 有了正确的思维模式，接下来就需要一套切实可行的策略和架构来支撑我们的设计。这一部分将深入探讨如何进行响应式设计的前期规划和整体架构。 移动优先 vs. 桌面优先： 这是一个经久不衰的讨论。本书将不预设任何一种绝对的优劣，而是引导读者根据项目需求、目标用户和内容特点，来选择最适合的设计起点。我们将深入分析两种策略各自的优势、劣势以及适用的场景。 断点（Breakpoints）的艺术： 断点是响应式设计中的关键概念，但如何科学地设置断点，而非随意为之，是需要深入研究的。本书将讲解如何根据内容和布局的自然变化来确定断点，以及避免断点过多导致的设计和开发负担。 流体布局（Fluid Grids）与弹性图像（Flexible Images）的精髓： 这两个是响应式设计最基础也是最重要的技术支撑。我们将深入讲解它们的原理，以及在实际应用中如何避免常见的陷阱，确保图像在缩放时不会失真或变形，布局能够平滑地过渡。 内容重排与优先级管理： 在不同的屏幕尺寸下，内容的呈现顺序和重要性可能会发生变化。本书将教授如何运用 CSS 媒体查询（Media Queries）等技术，对内容进行精细化的重排和管理，确保关键信息始终易于访问。 第三部分：交互与体验——让每个交互都流畅自然 设计不仅仅是视觉的呈现，更是交互的体验。在响应式设计中，如何确保用户在不同设备上的交互都同样顺畅和直观，是至关重要的。 触摸友好型界面设计： 针对触摸屏设备，按钮的大小、间距、可点击区域都需要特别设计。本书将深入探讨如何设计易于触摸的交互元素，以及如何处理滑动、缩放等触摸手势。 导航的智慧： 导航是用户探索网站的关键。在有限的移动端屏幕上，如何设计清晰、易于访问的导航系统，是一个巨大的挑战。我们将探讨各种创新的导航模式，如汉堡菜单、底部导航栏、折叠式菜单等，并分析它们的优劣。 表单设计的响应式考量： 表单是用户输入信息的重要渠道。在不同屏幕尺寸下，如何确保表单的可读性和易用性，避免用户输入错误，是本书将重点关注的。 微交互与反馈： 即便是细微的交互反馈，也能极大地提升用户体验。本书将引导读者思考如何在响应式设计中融入恰当的微交互，让用户操作时感受到清晰的反馈，从而建立信任感。 第四部分：性能优化——速度是用户体验的另一翼 响应式设计带来的不仅仅是灵活的布局，也可能伴随着性能的挑战。尤其是在移动端，网络速度和设备性能是有限的。 图片优化策略： 图片是网页的“大头”。本书将深入讲解如何根据不同屏幕尺寸加载不同分辨率的图片（如 `srcset` 属性），以及使用现代图片格式（如 WebP）来优化加载速度。 CSS 和 JavaScript 的性能考量： 如何编写精简高效的 CSS 和 JavaScript 代码，避免不必要的渲染和计算，也是响应式设计性能优化的重要环节。 渐进增强（Progressive Enhancement）与优雅降级（Graceful Degradation）： 这两种策略在响应式设计中扮演着重要角色。本书将详细阐述如何运用它们，确保核心功能在各种环境下都能正常工作，同时为支持更高级特性的设备提供更丰富的体验。 工具与工作流： 学习一些实用的工具和工作流，如响应式图片生成器、CSS 预处理器、构建工具等，能够极大地提高我们的开发效率和设计质量。 第五部分：未来的展望——拥抱变化，持续创新 数字世界瞬息万变，技术和用户需求都在不断发展。本书的最后一部分将着眼于未来，鼓励读者保持学习和创新的心态。 无障碍设计（Accessibility）与响应式设计： 无障碍设计是现代网页设计的必备要素，它与响应式设计相辅相成。本书将探讨如何将无障碍原则融入到响应式设计流程中，确保所有用户都能平等地访问网络。 服务于人工智能和新技术的响应式设计： 随着语音助手、AR/VR 等新技术的兴起，网页设计的边界正在被不断拓宽。本书将展望这些新技术对响应式设计提出的新挑战和新机遇。 持续测试与迭代： 响应式设计并非一蹴而就，持续的测试和用户反馈是优化的关键。本书将强调建立有效的测试流程，并根据实际数据进行迭代改进。 《网页的无限可能：拥抱灵动自适应的用户体验》不是一本指令式的教科书，它更像是一位经验丰富的向导，带领您穿越响应式设计的重重迷雾，抵达用户体验的光明彼岸。它旨在激发您的设计潜能，让您能够独立思考，创造出真正能够适应未来、服务于所有用户的、卓越的网页。这本书将帮助您理解，真正的灵动设计，是关于赋予网页生命，让它能够随着用户的需求和所处的环境，自然而然地舒展开来，呈现出最完美的状态。

评分☆☆☆☆☆

我最近迷上了摄影，尤其是风光摄影。刚开始只是用手机随便拍拍，但渐渐地发现手机的局限性，于是咬牙入了一台单反相机。然而，拿到相机后，我发现自己连基本的参数设置都搞不明白，更别说拍出好看的照片了。网上关于摄影的教程五花八门，有的讲构图，有的讲用光，有的讲后期处理，信息太杂乱了。我尝试着去学习，但总觉得学到的都是碎片化的知识，不成体系。有时候，我对着美丽的风景，却拍不出想要的效果，感到非常沮丧。我渴望找到一本能够系统性地讲解摄影基础知识，从相机操作、曝光原理、构图技巧到后期处理，一步步带我入门的书籍。最好这本书还能有大量的实拍案例分析，讲解不同场景下的拍摄思路和技巧，甚至能涵盖一些户外摄影的注意事项，这样我才能更有针对性地提升自己的摄影水平。

评分☆☆☆☆☆

最近我开始尝试自己动手制作一些家居小物件，主要是想给我的生活增添一些乐趣，同时也让家里的装饰更有个性。我在网上看了不少DIY教程，有制作香薰蜡烛的，有制作布艺抱枕的，还有制作收纳筐的。但很多教程都只讲了大概的步骤，对于一些关键的细节，比如材料的选择、工具的使用、注意事项等等，都没有详细说明。我试着跟着做，结果要么是成品不尽如人意，要么是过程中遇到困难，不知道如何解决。有时候，我会因为材料不对而导致失败，或者因为操作不当而弄得一团糟。我真的很希望有一本能够提供详细、准确的DIY教程的书籍，它应该包含所需材料的清单，详细的操作步骤，清晰的图示或者视频链接，以及一些成功的经验和避免失败的技巧。最好还能根据不同难度级别进行分类，让我可以循序渐进地学习，慢慢掌握各种手工制作的技能。

评分☆☆☆☆☆

最近刚搬进新家，厨房里的东西太多了，收纳成了我的一大难题。本来想着先随便放放，等安顿好了再慢慢整理，结果现在一团糟，做饭的时候找个锅铲都要翻箱倒柜。我上网搜了不少收纳教程，有关于橱柜收纳的，有关于冰箱收纳的，还有关于小户型收纳的，信息量太大，反而不知道从何下手。一些博主分享的收纳神器，看起来都很诱人，但我家厨房空间有限，很多东西买了也放不下，或者不实用。我试着按照网上的视频学着做，比如利用墙面空间挂置物品，或者用收纳盒分隔抽屉，但效果总是不尽如人意。有时候觉得，收纳这事儿真的需要一些系统性的指导，而不是零散的技巧。我需要的是一个能教我如何根据自家厨房的具体情况，设计出最合理的收纳方案，并且能给出详细的操作步骤和一些实用的收纳工具推荐，这样我才能真正解决这个问题。

评分☆☆☆☆☆

这几天一直在折腾我的老笔记本，想让它重获新生，在各种社区和论坛里搜罗配置方案。一开始就被各种“硬核”名词轰炸，什么“超频”、“BIOS”、“显卡驱动”，看得我眼花缭乱。好不容易找到几个看起来靠谱的教程，结果视频里的操作和我的电脑型号几乎对不上，简直是鸡同鸭讲。还有些博主，一边故作高深地讲着原理，一边又把最关键的步骤一笔带过，生怕别人学会了似的。我好几次都想放弃，直接买个新的算了，但又心有不甘，毕竟电脑还能用，只是速度太慢了，影响工作效率。朋友推荐我试试一些免费的优化软件，我尝试了几款，效果都不太明显，反而感觉电脑更卡了，真是郁闷。我现在特别希望有一个那种能把所有可能遇到的问题都考虑到，并且给出详细步骤和截图的指南，最好还能根据不同电脑配置给出针对性建议，这样我才能更有信心继续下去。

评分☆☆☆☆☆

最近一直在学习如何更好地管理自己的时间，毕竟工作和生活都比较忙碌，总感觉时间不够用。我尝试了一些时间管理的方法，比如番茄工作法、GTD（Getting Things Done）等，但总觉得实践起来有些困难，效果也不是很理想。有些时间管理类书籍，讲的理论性太强，不太接地气，读起来容易产生“听君一席话，如听一席话”的感觉。还有些文章，只是简单地列举一些提高效率的小技巧，但没有系统性的方法论。我发现自己很容易被各种突发事件打断，或者因为效率不高而拖延，导致很多事情堆积起来，压力很大。我希望能找到一本能够深入浅出地讲解时间管理原理，并且提供一套完整、可行的实践体系的书籍，最好还能包含一些应对拖延、提高专注力的方法，以及如何平衡工作与生活的建议，这样我才能真正掌握时间管理的主动权。

评分☆☆☆☆☆

里面介绍了一些响应式工具，基本理论和我之前知道的差不多，也就算做了一个印证

评分☆☆☆☆☆

总体还算不错！如果是彩页地位就更好了～

评分☆☆☆☆☆

书不错啊，朋友推荐的，谢谢啦

评分☆☆☆☆☆

对我帮助很大。。很不错的一本书。对响应式理解一下就升级了

评分☆☆☆☆☆

基于设备视口宽度，通过媒体查询显示不同的CSS样式

评分☆☆☆☆☆

不错的书～～～

评分☆☆☆☆☆

采用性能优化技术建立更轻量级、更快的网站

评分☆☆☆☆☆

ecmaffgwvbbnj

评分☆☆☆☆☆

学习用品