新書推薦：
《
万有引力书系 纳粹亿万富翁 德国财富家族的黑暗历史
》
售價：HK$
112.7
《
中国常见植物野外识别手册：青海册
》
售價：HK$
78.2
《
三星堆对话古遗址（从三星堆出发，横跨黄河流域，长江流域，对话11处古遗址，探源多元一体的中华文明）
》
售價：HK$
89.7
《
迷人的化学（迷人的科学丛书）
》
售價：HK$
147.2
《
宋代冠服图志（详尽展示宋代各类冠服 精美插图 考据严谨 细节丰富）
》
售價：HK$
87.4
《
形似神异：什么是中日传统政治文化的结构性差异
》
售價：HK$
55.8
《
养育不好惹的小孩
》
售價：HK$
79.4
《
加加美高浩的手部绘画技法 II
》
售價：HK$
91.8
|
| 編輯推薦： |
书中实践源于多年生产环境的经验总结，绝不是赘述纯理论知识，而是教你在实践中如何开展响应式设计工作。你将学会利用已知的HTML5和CSS3新特性来进行创新设计，然后找到权衡APP和Web以及处理浏览器兼容性的方法。《响应式Web》为专业的设计师和开发者创造前端Web界面而生。
《响应式Web》内容涵盖：
* 响应式设计概念
* CSS预处理器
* 快速原型技术
* 流式布局
* 渐进增强设计
|
| 內容簡介： |
《响应式Web》全面介绍了响应式设计的概念以及技术技巧，由浅入深地讲解了其中原理性的知识。第1部分从开发者和设计师的角度介绍了响应式设计的基本概念。第2部分从开发者与设计师协作的角度介绍了如何进行响应式设计。第3部分对编码技巧和实战优化进行了介绍。
响应式设计是一种新的设计理念，需要你不断地学习、探索、实践。它会让你的网页内容在不同设备上展现得更加精彩。
|
| 關於作者： |
Matthew Carver 是一名技术专家、演讲者、作者和提倡设计和技术相融合的顾问。他是响应式Web 设计早期的拥护者，曾参与过American Airlines、Dallas MomoingNews、Chobani、Home Depot 和Google 等公司的给生活带来革新的项目。Matthew*初在德克萨斯州达拉斯市的Richards Group 工作，现在与他的伙伴一同在纽约市成立了一家数字公司，他们会把一些想法发布到线上。他的个人主页为 Matthew-Carver.com，Twitter 账号是@matthew_carver。
王鹤，系统架构设计师，吉他手。从事过JavaEE的企业应用的研发和架构工作，一直关注HTML5技术的发展，2011年至今一直维护开源图表项目ichartjs。目前就职于美团网，任职前端技术专家，秉承的信念是“技术这条路上虽然崎岖，但值得坚持”。
罗创杰，美团网研发工程师，专注于前端领域，喜欢从容不迫地写代码——很优雅的那种。
|
| 目錄：
|
第1部分 响应式之道
1 开启响应式之路 ..........3
1.1 初探响应式Web ................................... 5
1.1.1 什么是响应式 Web .................. 5
1.1.2 关键特性 .................................. 8
1.2 构建**个响应式网站 .................... 10
1.2.1 创建网站原型 ........................ 11
1.3 响应式布局基础 ................................ 18
1.3.1 移动优先标签 ........................ 19
1.3.2 在 CSS中使用百分比 ........... 24
1.3.3 添加文本和图像 .................... 28
1.3.4 强大易变的 em ...................... 30
1.3.5 设置**个断点 .................... 33
1.4 总结 ...................................... 34
1.5 讨论的观点 ................................ 35
2 移动优先的设计 ........ 37
2.1 为何选择移动优先设计 .................... 38
2.1.1 移动优先设计的优点 ............ 39
2.1.2 移动优先设计的挑战 ............ 40
2.2 为小屏幕设计头部 ............................ 42
2.2.1 创建头部 ................................ 42
2.3 设计触屏界面交互 ............................ 44
2.3.1 简约的小屏幕网格 ................ 45
2.4 为小屏幕设计内容 ............................ 47
2.4.1 在布局中使用 Web字体 ....... 48
2.5 总结 .................................. 51
2.6 讨论的观点 ............................. 51
第2部分 响应式Web设计之旅
3 使用样式板表达设计.. 55
3.1 利用设计指南进行可视化设计 ........ 56
3.1.1 设计指南是什么 .................... 57
3.1.2 开发一个设计指南 ................ 58
3.1.3 样式板：创建一种视觉语言 59
3.2 如何创建一个样式板 ........................ 60
3.2.1 获得反馈 ................................ 61
3.2.2 设计样式板 ............................ 61
3.2.3 创建样式板 ............................ 63
3.2.4 利用样式板进行迭代设计 .... 68
3.3 模型之死 ........................... 69
3.4 总结 ...................................... 70
3.5 讨论的观点 ............................ 70
4 响应式用户体验设计模式 ....................... 71
4.1 一级导航 ............................................ 73
4.1.1 toggle导航模式 ..................... 74
4.1.2 select menu导航模式 ............ 79
4.1.3 toggle导航和 select menu导航的比较 .............. 81
4.2 多级toggle导航 ................................ 82
4.3 响应式用户体验设计模式资源 ........ 87
4.4 总结 .................................................... 87
4.5 讨论的观点 ........................................ 88
5 响应式布局............... 89
5.1 利用百分比进行流式布局 ................ 90
5.1.1 CSS中的百分比是如何工作的 ...................... 90
5.1.2 box-sizing ............................... 94
5.1.3 流式网格系统 ........................ 97
5.2 构建一个流式布局 .......................... 101
5.2.1 解读原型 .............................. 101
5.2.2 开始编码 .............................. 102
5.2.3 让 off-canvas元素动起来 ... 105
5.2.4 使元素具有响应性 .............. 106
5.2.5 拓展到更宽的视图 .............. 109
5.3 总结 .................................... 110
5.4 讨论的观点 ...................................... 110
6 添加内容模块和排版.113
6.1 添加内容模块 .................................. 115
6.1.1 创建有用的内容占位符 ...... 116
6.2 响应式设计中的排版 ...................... 121
6.2.1 嵌入式字体 .......................... 121
6.2.2 设置一个排版基础 .............. 123
6.3 总结 ..................................... 126
6.4 讨论的观点 ...................................... 126
第3部分 用代码来延伸设计
7 用CSS在浏览器中增加图形......................129
7.1 利用CSS实现设计 ........................... 130
7.1.1 CSS基础 .............................. 131
7.1.2 在流体结构中维持比例 ...... 133
7.2 在你的设计中使用icon字体 ........... 136
7.2.1 在用户界面中使用雪碧图 .. 137
7.2.2 基于字体的用户界面图形 .. 138
7.3 使用可缩放矢量图形 ...................... 140
7.3.1 为页面添加 SVG图像 ........ 141
7.3.2 用 CSS实现 SVG ................ 144
7.3.3 SVG格式的局限性 ............. 146
7.4 总结 .................................. 147
7.5 讨论的观点 ...................................... 148
8 渐进增强和Modernizr的过时控制....................149
8.1 技术性过时 ...................................... 150
8.1.1 渐进增强 .............................. 150
8.1.2 优雅降级 .............................. 154
8.2 Modernizr是什么 ............................. 155
8.2.1 初始化 Modernizr ................ 157
8.2.2 利用 Modernizr写跨浏览器的 CSS ..................... 159
8.3 用Modernizr进行JavaScript特性检测 .................. 162
8.3.1 检测触摸能力 ...................... 163
8.3.2 使用 Modernizr.load和 yepnope ....................... 164
8.3.3 创建定制的 Modernizr测试 ............................. 165
8.4 在网站中添加Modernizr ................. 166
8.5 总结 ........................................ 169
8.6 讨论的观点 ........................
|
| 內容試閱：
|
译者序
迈克尔·塞勒（Michael Saylor）所著的《移动浪潮》一书中有这样一段话：“一项真正颠覆性的技术出现了，而且它将彻底改变商业、社会或经济。它在多个层面产生非线性的影响，而且其影响巨大，以至于很难在尘埃落定之前确定其影响范围。 ”
以 iPhone为代表的移动设备便是具有代表性的颠覆性产品，它带来了令人惊叹的用户体验。早在 2009年的时候，我所负责的项目便涉及了移动 Web开发。虽然那时只是一个简单的 OA审批页面，但为了能在 PC和手机上显示，我们使用了独立的两套模板。随着业务的不断深入，类似的需求越来越多。这样需要维护的“双胞胎”页面也越来越多，制作及维护代价越来越大。直到我拜读到伊桑·马科特（ Ethan Marcotte）关于流动布局介绍的文章后，方才茅塞顿开。根据其设计思想加上少量的 JavaScript代码实现了可以兼容 PC和移动端的页面，当然现在看来，那时的页面和技术还略显粗糙，但是已经令我兴奋不已。
转眼间到了 2010年 5月，伊桑 ·马科特在 A List Apart上发表了一篇题为“响应式 Web设计”（Responsive Web Design）的文章，他利用三种工具创建了一个在不同分辨率屏幕下都能完美展示的网页。它们分别是：流式布局、媒体查询和弹性图片。这种设计思想将我们带入一个新的时代，让我们先来认识一下响应式 Web设计的“三剑客”。
流式布局
与传统的固定布局以像素单位为主不同，流式布局以百分比单位为主，这样便可以设计出更具灵活性的布局方式。如： Bootstrap移动设备优先的流式栅格系统。
媒体查询
媒体查询是与设备相关的技术，它可以让你查询到设备的各种属性值，如：设备类型、分辨率、屏幕物理尺寸及色彩等。从而决定应用不同的样式，给出求同存异的布局 样式方案。
弹性图片
弹性的含义可表述为，图片可以根据当前的视窗自适应展示，图片的视觉表现力非常突出，因此弹性图片的布局与适配非常重要，这里所述的图片包含了以图片为代表的图形或者媒体元素：图片、图标、图表及视频等。
基于上述工具进行响应式 Web设计，可以使用以下两种设计模式。
设备优先
断点是为了适应各种设备的宽度值，技术上是基于媒体查询来判定当前设备的宽度，从而可设计多套样式来满足不同设备的视觉展示需求。因此设计模式是基于设备的。
移动优先
移动优先允许你优先考虑内容并更早地关注你的网站的*重要部分。某些时候，移动优先也许与“内容优先”同义，从核心上说，移动网站策略就是内容策略。由于大小、功率和带宽等限制，移动 Web设计 90%是内容性设计， 10%是装饰性设计。所以我们要根据内容的可读性、易读性来确定断点，从而无视设备。因此设计模式是基于内容的。
本书简介
本书全面介绍了响应式设计的概念以及技术技巧，由浅入深地讲解了其中原理性的知识。共分三个部分。
第 1部分
从开发者和设计师的角度介绍了响应式设计的基本概念，让你能快速地对响应式设计有基本认知和了解，涵盖了媒体查询、断点、移动优先、字体等知识。为开始构建响应式网站提供了必要的背景知识。
第 2部分
从开发者与设计师协作的角度介绍了如何进行响应式设计，让你了解在响应式设计中团队应该如何进行协作来完成一项成果。同时用了一个示例来阐述这个过程，涵盖了样式指南、设计模式、布局、排版、网格等知识。*后对面对多种终端设备如何组织内容模块进行了深入探讨。
第 3部分
这部分对编码技巧和实战优化进行了介绍，涵盖了 SVG、图标字体、测试、浏览器兼容增强、性能等知识，这会让你在实战中得到更多的技术支持和应用。
响应式设计是一种新的设计理念，需要你不断学习、探索、实践，它会让你的内容在不同设备上展现得更加精彩。
适用读者
本书适合任何对 Web设计感兴趣的读者进行阅读，特别适合前端工程师、设计师、产品经理、架构师、项目经理等。示例中会涉及一些 HTML和 CSS代码，理解这些代码会极大帮助你深入了解响应式 Web设计开发中的技巧。
|
|
購物車/收銀台(0) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
