具体描述
本书将当前Web 设计中热门的响应式设计技术与HTML5 和CSS3 结合起来,为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。书中不仅讨论了媒体查询、弹性布局、响应式图片,更将最新和最有用的HTML5 和CSS3 技术一并讲解,是学习最新Web 设计技术不可多得的佳作。
作者简介
作者简介:
Ben Frain
Web开发者、图书作者、演讲者。从1996年开始从事Web设计与开发,目前是Bet365的高级前端工程师。另著有《Sass和Compass设计师指南》。
在从事Web开发之前,他曾是一名怀才不遇的(而且谦虚的)电视演员和科技记者,毕业于索尔福德大学媒体与表演专业。他写过四部(自认为)均被低估的剧本,且至今仍觉得有望卖出其中一部(尽管不像最初那么有信心了)。
工作之余,在身体和妻子都允许的情况下,他会玩一玩室内足球,或者跟两个儿子练练摔跤。个人网站www.benfrain.com,Twitter账号@benfrain。
译者简介:
本书译者均来自由月影领衔的奇虎360最大前端团队——奇舞团(75team)。
李松峰
资深技术翻译,译有《JavaScript高级程序设计》《简约至上:交互式设计四策略》等数十部技术和设计书籍,现为“奇舞团”高级开发工程师、《奇舞周刊》总编。
钟恒
360奇舞团前端工程师。
目录信息
1.1 定义需求 1
1.2 什么是响应式Web设计 2
1.3 浏览器支持 2
1.4 第一个响应式的例子 4
1.4.1 HTML 5
1.4.2 图片 8
1.4.3 媒体查询 10
1.5 示例的不足之处 14
1.6 小结 15
第2章 媒体查询 16
2.1 为什么响应式Web设计需要媒体查询 17
2.2 媒体查询的语法 18
2.3 组合媒体查询 19
2.3.1 @import与媒体查询 20
2.3.2 在CSS中使用媒体查询 20
2.3.3 媒体查询可以测试哪些特性 20
2.4 通过媒体查询修改设计 21
2.4.1 任何CSS都可以放在媒体查询里 23
2.4.2 针对高分辨率设备的媒体查询 23
2.5 组织和编写媒体查询的注意事项 24
2.5.1 使用媒体查询链接不同的CSS文件 24
2.5.2 分隔媒体查询的利弊 25
2.5.3 把媒体查询写在常规样式表中 25
2.6 组合媒体查询还是把它们写在需要的地方 25
2.7 关于视口的meta标签 27
2.8 媒体查询4级 28
2.8.1 可编程的媒体特性 29
2.8.2 交互媒体特性 30
2.8.3 悬停媒体特性 30
2.8.4 环境媒体特性 31
2.9 小结 31
第3章 弹性布局与响应式图片 32
3.1 将固定像素大小转换为弹性比例大小 33
3.1.1 为什么需要Flexbox 36
3.1.2 行内块与空白 37
3.1.3 浮动 37
3.1.4 表格与表元 37
3.2 Flexbox概述 38
3.2.1 Flexbox三级跳 38
3.2.2 浏览器对Flexbox的支持 38
3.3 使用Flexbox 39
3.3.1 完美垂直居中文本 40
3.3.2 偏移 41
3.3.3 反序 42
3.3.4 不同媒体查询中的不同Flexbox布局 43
3.3.5 行内伸缩 44
3.3.6 Flexbox的对齐 45
3.3.7 flex 50
3.3.8 简单的粘附页脚 52
3.3.9 改变原始次序 53
3.3.10 Flexbox小结 57
3.4 响应式图片 58
3.4.1 响应式图片的固有问题 58
3.4.2 通过srcset切换分辨率 59
3.4.3 srcset及sizes联合切换 59
3.4.4 picture元素 60
3.5 小结 61
第4章 HTML5与响应式Web设计 62
4.1 得到普遍支持的HTML5标记 63
4.2 开始写HTML5网页 63
4.2.1 doctype 64
4.2.2 HTML标签与lang属性 64
4.2.3 指定替代语言 64
4.2.4 字符编码 64
4.3 宽容的HTML5 65
4.3.1 理性编写HTML5 66
4.3.2 向<a>标签致敬 66
4.4 HTML5的新语义元素 67
4.4.1 <main>元素 67
4.4.2 <section>元素 68
4.4.3 <nav>元素 68
4.4.4 <article>元素 68
4.4.5 <aside>元素 69
4.4.6 <figure>和<figcaption>元素 69
4.4.7 <detail>和<summary>元素 69
4.4.8 <header>元素 71
4.4.9 <footer>元素 71
4.4.10 <address>元素 71
4.4.11 h1到h6 72
4.5 HTML5文本级元素 72
4.5.1 <b>元素 72
4.5.2 <em>元素 73
4.5.3 <i>元素 73
4.6 作废的HTML特性 73
4.7 使用HTML5元素 74
4.8 WCAG和WAI-ARIA 75
4.8.1 WCAG 75
4.8.2 WAI-ARIA 75
4.8.3 如果你只能记住一件事 76
4.8.4 ARIA的更多用途 76
4.9 在HTML5中嵌入媒体 77
4.9.1 使用HTML5视频和音频 77
4.9.2 audio与video几乎一样 79
4.10 响应式HTML5视频与内嵌框架 79
4.11 关于“离线优先” 80
4.12 小结 81
第5章 CSS3新特性 82
5.1 没人无所不知 82
5.2 剖析CSS规则 83
5.3 便捷的CSS技巧 83
5.4 断字 86
5.4.1 截短文本 86
5.4.2 创建水平滚动面板 87
5.5 在CSS中创建分支 89
5.5.1 特性查询 89
5.5.2 组合条件 90
5.5.3 Modernizr 91
5.6 新CSS3选择符 93
5.6.1 CSS3属性选择符 93
5.6.2 CSS3子字符串匹配属性选择符 93
5.6.3 属性选择符的注意事项 95
5.6.4 属性选择符选择以数值开头的ID和类 96
5.7 CSS3结构化伪类 96
5.7.1 :last-child 96
5.7.2 nth-child 97
5.7.3 理解nth 97
5.7.4 基于nth的选择与响应式设计 100
5.7.5 :not 102
5.7.6 :empty 103
5.7.7 :first-line 104
5.8 CSS自定义属性和变量 104
5.9 CSS calc 105
5.10 CSS Level 4选择符 105
5.10.1 :has伪类 105
5.10.2 相对视口的长度 106
5.11 Web排版 106
5.11.1 @font-face 107
5.11.2 通过@font-face实现Web字体 107
5.11.3 注意事项 109
5.12 CSS3的新颜色格式及透明度 109
5.12.1 RGB 109
5.12.2 HSL 110
5.12.3 alpha通道 111
5.12.4 CSS Color Module Level 4的颜色操作 112
5.13 小结 112
第6章 CSS3高级技术 113
6.1 CSS3的文字阴影特效 113
6.1.1 省略blur值 114
6.1.2 多文字阴影 115
6.2 盒阴影 115
6.2.1 内阴影 115
6.2.2 多重阴影 116
6.2.3 阴影尺寸 116
6.3 背景渐变 117
6.3.1 线性渐变语法 118
6.3.2 径向渐变背景 120
6.3.3 为响应式而生的关键字 120
6.4 重复渐变 121
6.5 使用渐变背景创造图案 122
6.6 多张背景图片 123
6.6.1 背景大小 124
6.6.2 背景位置 124
6.6.3 背景属性的缩写 125
6.7 高分辨率背景图像 126
6.8 CSS滤镜 126
6.8.1 可用的CSS滤镜 127
6.8.2 使用多个CSS滤镜 132
6.9 CSS性能的警告 132
6.10 小结 134
第7章 SVG与响应式Web设计 135
7.1 SVG的历史 137
7.2 用文档表示的图像 137
7.2.1 SVG的根元素 138
7.2.2 命名空间 139
7.2.3 标题和描述标签 139
7.2.4 defs标签 139
7.2.5 元素g 140
7.2.6 SVG形状元素 140
7.2.7 SVG路径 140
7.3 使用流行的图像编辑工具和服务创建SVG 140
7.4 在Web页面中插入SVG 142
7.4.1 使用img标签 142
7.4.2 使用object标签 142
7.4.3 把SVG作为背景图像插入 143
7.4.4 关于data URI的简短介绍 144
7.4.5 生成图像精灵 145
7.5 内联SVG 145
7.5.1 利用符号复用图形对象 146
7.5.2 根据上下文改变内联SVG颜色 147
7.5.3 复用外部图形对象资源 148
7.6 不同插入方式下可以使用的功能 149
7.7 SVG的怪癖 150
7.7.1 SMIL动画 150
7.7.2 使用外部样式表为SVG添加样式 152
7.7.3 使用内联样式为SVG添加样式 152
7.7.4 用CSS为SVG添加动画 153
7.8 使用JavaScript添加SVG动画 154
7.9 优化SVG 156
7.10 把SVG作为滤镜 157
7.11 SVG中媒体查询的注意事项 159
7.11.1 实现技巧 160
7.11.2 更多资料 160
7.12 小结 161
第8章 CSS3过渡、变形和动画 162
8.1 什么是CSS3过渡以及如何使用它 162
8.1.1 过渡相关的属性 164
8.1.2 过渡的简写语法 165
8.1.3 在不同时间段内过渡不同属性 165
8.1.4 理解过渡调速函数 166
8.1.5 响应式网站中的有趣过渡 167
8.2 CSS的2D变形 167
8.2.1 scale 168
8.2.2 translate 168
8.2.3 rotate 171
8.2.4 skew 171
8.2.5 matrix 172
8.2.6 transform-origin属性 173
8.3 CSS3的3D变形 174
8.4 CSS3动画效果 180
8.5 小结 183
第9章 表单 184
9.1 HTML5表单 184
9.2 理解HTML5表单中的元素 185
9.2.1 placeholder 186
9.2.2 required 186
9.2.3 autofocus 187
9.2.4 autocomplete 188
9.2.5 list及对应的datalist元素 188
9.3 HTML5的新输入类型 190
9.3.1 email 190
9.3.2 number 191
9.3.3 url 192
9.3.4 tel 193
9.3.5 search 194
9.3.6 pattern 195
9.3.7 color 196
9.3.8 日期和时间输入类型 196
9.3.9 范围值 198
9.4 如何给不支持新特性的浏览器打补丁 199
9.5 使用CSS美化HTML5表单 200
9.5.1 显示必填项 202
9.5.2 创造一个背景填充效果 204
9.6 小结 205
第10章 实现响应式Web设计 206
10.1 尽快让设计在浏览器和真实设备上运行起来 207
10.2 在真实设备上观察和使用设计 207
10.3 拥抱渐进增强 208
10.4 确定需要支持的浏览器 209
10.4.1 等价的功能,而不是等价的外观 209
10.4.2 选择要支持的浏览器 209
10.5 分层的用户体验 210
10.6 将CSS断点与JavaScript联系起来 211
10.7 避免在生产中使用CSS框架 212
10.8 采用务实的解决方案 213
10.9 尽可能使用最简单的代码 215
10.10 根据视口隐藏、展示和加载内容 215
10.11 验证器和代码检测工具 217
10.12 性能 218
10.13 下一个划时代的产物 219
10.14 小结 219
· · · · · · (收起)
读后感
偶然的机会,你要开次夜车(注意,不是“开夜车” [汗]),横穿十里长安街。凌晨三点,你的车距离长安街500米。整条街空空荡荡的,像是刚刚散场人去楼空的电影院,一辆车也没有,路灯昏暗不明。很快,你的车还有100米就要上长安街了。此时,前方路口左右两侧的4盏灯突然变亮了...
首先废话几句我是怎么买到以及阅读这本书的。 1、这本书很久之前就已经在我的豆瓣读书里了。原价49,双十一卖19,于是买。 2、几天后到手,用了3天时间(业余时间)读完,在此之前有3年前端开发经验,对于HTML+CSS不敢说技术高深但也驾轻就熟。 然后说说这本书到底讲了什么。...
偶然的机会,你要开次夜车(注意,不是“开夜车” [汗]),横穿十里长安街。凌晨三点,你的车距离长安街500米。整条街空空荡荡的,像是刚刚散场人去楼空的电影院,一辆车也没有,路灯昏暗不明。很快,你的车还有100米就要上长安街了。此时,前方路口左右两侧的4盏灯突然变亮了...
前半部分讲解responsive design,后面都是一些对html5、css3功能的罗列,没总结学习过的同学可以读一下,实际5~8章是可以略过,直接跳到最后一章吧。 另外我还是更推荐这本书《Implementing Responsive Design》
我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看...
用户评价
作为一个对Web开发充满热情的初学者,我曾经在各种技术汪洋中感到迷茫。尤其是在面对不同尺寸的屏幕时,我的项目总是显得那么笨拙和不协调。我尝试过一些零散的教程,但往往是“知其然,不知其所以然”。这本书的出现,如同一盏明灯,照亮了我前进的道路。它没有一开始就灌输复杂的框架,而是从最根本的原理入手,让我理解了“响应式”的真正含义。书中对HTML语义化和CSS基础的梳理,为我打下了坚实的基础。然后,它循序渐进地介绍了媒体查询(media queries),并用大量的图文并茂的例子,展示了如何根据不同的屏幕尺寸调整元素的样式和布局。我特别喜欢书中关于网格系统(grid systems)的讲解,它让我理解了如何通过结构化的方式来构建页面,使其能够灵活地适应各种屏幕。此外,书中对弹性盒子(Flexbox)的应用讲解得也非常到位,让我能够轻松地实现复杂的对齐和分布。更让我感动的是,这本书还关注到了很多细节,比如如何处理导航栏在不同屏幕下的显示问题,如何优化图片以提高加载速度,以及如何进行跨浏览器兼容性测试。读完这本书,我感觉自己不再是那个只会写静态页面的新手,而是能够构建出真正具有生命力、能够适应各种设备的Web应用,让我对未来的Web开发充满了信心。
在我的职业生涯中,曾经有过不少项目,都因为设备的碎片化而陷入了无尽的返工。客户想要一个既能在电脑上看起来专业大气,又能让手机用户轻松操作的网站。我们尝试了各种方法,从单独开发移动版网站,到尝试使用一些半生不熟的UI框架,但总是效果不尽如人意,要么开发周期过长,要么维护起来像噩梦。这本书,它就像一个来自未来的指南针,指引我走出迷雾。我第一次真正理解了“响应式”这个词背后的深层含义,它不是简单的屏幕适配,而是一种“为所有而设计”的哲学。书中关于视口(viewport)的解释,以及如何利用HTML5的meta标签来控制它,让我对移动端渲染有了根本性的认识。接着,对CSS媒体查询(media queries)的讲解,详尽而有条理,从最基础的用法到更高级的嵌套和组合,都一一涵盖,并且提供了大量的实际应用场景示例。我尤其喜欢书中关于如何选择合适的断点(breakpoints)的讨论,这让我不再盲目地跟随大众的标准,而是能够根据具体的设计需求来做出更明智的决策。这本书还详细阐述了如何设计灵活的布局,如何处理图像缩放,以及如何优化导航菜单,让它们在不同屏幕尺寸下都能提供良好的用户体验。读完这本书,我感觉自己掌握了一套全新的工具和一套全新的思维方式,能够让我更自信、更高效地去构建适应未来各种设备挑战的Web应用。
我一直认为,Web设计应该是能够跨越设备鸿沟的,让每一个用户,无论使用何种设备,都能获得同样高质量的浏览体验。然而,现实往往是残酷的,很多网站在移动端简直是灾难,要么加载缓慢,要么布局混乱,要么交互困难。这本书,它以一种令人耳目一新的方式,为我揭示了实现这一理想的路径。它没有空谈概念,而是从技术实现的细节入手,深入浅出地讲解了响应式Web设计的核心技术。书中对CSS单位的讲解,特别是相对单位(如em, rem, vw, vh)的应用,让我明白了如何构建真正灵活的排版和布局,让元素能够根据容器的大小进行优雅的缩放。对弹性盒子(Flexbox)和CSS网格(CSS Grid)的讲解更是让我受益匪浅,这些强大的布局工具,在作者的引导下,变得直观易懂,并且能够解决我在过去遇到的许多棘手布局问题。我还特别欣赏书中关于图片响应式处理的章节,它不仅介绍了srcset属性和<picture>元素,还讲解了如何根据屏幕密度和带宽来加载最合适的图片,这对于提升移动端加载速度和用户体验至关重要。这本书让我明白了,响应式设计不仅仅是前端开发的一项技能,更是一种对用户负责任的态度,一种追求极致用户体验的承诺。
这本书简直是前端开发者的一剂良药,尤其对于那些像我一样,曾经在各种屏幕尺寸下苦苦挣扎、调试到眼冒金星的开发者来说。在读这本书之前,我的项目总是存在一些尴尬的时刻:在手机上,文字小得像蚂蚁,按钮触碰不到,导航栏挤成一团;在平板上,布局勉强能看,但就是少了点“大气”;到了桌面端,虽然内容全了,但总感觉浪费了大量空白,视觉效果不够吸引人。尝试过一些零散的教程和片段代码,但总是治标不治本,遇到复杂一点的布局就束手无策。这本书的出现,彻底改变了我的困境。它并没有直接丢给我一堆花哨的框架,而是从最根本的原理讲起,解释了“响应式”到底是什么,为什么要这样做,以及背后的思想。我明白了,这不仅仅是关于媒体查询(media queries)的简单应用,更是一种思维方式的转变,一种拥抱不同设备、尊重用户体验的设计哲学。书中对网格系统(grid systems)的讲解尤其深入,让我理解了如何构建灵活且适应性强的页面结构,而不是死板地堆砌元素。还记得书中关于断点(breakpoints)设置的讨论,让我意识到,断点不是随意选择的,而是要基于内容和设计需求来确定的,这比我之前凭感觉设定的要科学得多。总而言之,这本书给我提供了一个系统性的解决方案,让我能够自信地应对各种设备上的显示问题,并且能设计出真正用户友好、美观大方的网页。
我一直对用户体验(UX)有着浓厚的兴趣,但将理论转化为实践,尤其是在Web端,总感觉隔着一层窗户纸。尤其是看到一些网站在手机上体验极差,广告遮挡内容,或者需要不停缩放才能看清,我就觉得非常不舒服。这本书,它就像一位经验丰富的设计大师,用一种非常平实且富有洞察力的方式,为我揭示了如何创造一个能够无缝适应各种屏幕尺寸的Web界面。它不仅仅是教你如何写代码,更重要的是,它引导我去思考“为什么”。为什么需要响应式设计?它如何影响用户与网站的互动?它如何帮助开发者提升效率?书中对弹性盒子(Flexbox)和CSS网格(CSS Grid)的深入剖析,让我仿佛打通了任督二脉,这些曾经让我头疼不已的布局工具,在作者的讲解下变得清晰易懂,而且充满了灵活性。我学会了如何利用它们来构建真正动态的、可以根据容器大小自由伸展和收缩的组件。更让我惊喜的是,书中还提到了很多关于字体大小、图片加载、导航交互等细节上的优化,这些看似微小的点,却对整体的用户体验有着至关重要的影响。读完之后,我感觉自己对“好的Web设计”有了更深的理解,不再是停留在美观的层面,而是真正关注到了用户的便利性和设备的适配性。这本书让我明白,响应式设计并非一项技术,而是一种对用户和对技术的双重尊重。
已经出新版本了。变化很大。
这本应该再读一遍,但是里面东西没有嚼头
如果是想了解响应式设计,只需要看1,2,3章,后面的都不用看了
印刷错误比较多。
差评 所有东西只提到一点点不深入 说也没说清楚 也就是顶多告诉你有这么个东西要你再去找教程去专门学