内容简介
响应式Web设计的理念是让页面根据用户行为以及设备环境(屏幕尺寸、分辨率等)进行相应的响应和调整。
响应式网页设计就是一个网站能够兼容多种终端,而不是为每种终端做一个特定的版本。
本书分为两部分,首部分是前端的基本响应式技术,涉及响应式布局、图片的处理、解决问题的思路以及一些进阶的技巧等;第二部分在以上内容的基础上,加入了对页面进行性能调优的内容,包括如何确立性能指标,如何使用不同的工具衡量性能,以及如何解决常规的性能问题等。
本书适合有兴趣学习响应式技术的前端从业人员和其他相关人员阅读。
作者简介
李光毅 曾就职于爱奇艺,现任百度高级前端工程师,主要负责前端Web 产品开发, 以及后端Node.js 框架维护。
在HTML、JavaScript 等前端技术方面略有心得,喜欢对Web 性能吹毛求疵,同时也对ASP.NET、MongoDB、Python 等技术有着浓厚的兴趣。
业余时间曾经喜欢折腾硬件编程,如Kinect for Windows、Leap Motion 等,现在爱好使用Unity 写游戏。
热爱前端,乐于分享。
目录
目录
第1章概述及任务介绍1
1.1 为什么需要响应式设计 1
1.1.1产品形态需要 1
1.1.2性能与商业考虑 3
1.2 本书的线索 3
1.3 写作思路 4
1.4 定义响应式 5
1.5 本书任务 6
第2章 响应式中要面对的问题 9
2.1 像素密度 9
2.2 CSS像素 14
2.3 视口 17
2.3.1桌面浏览器的视口 17
2.3.2移动设备浏览器的视口 18
2.3.3设备宽度 20
小结 21
第3章 布局 23
3.1 写在编码前的话 23
3.1.1写出好的代码 24
3.1.2代码的浏览器适配问题 25
3.1.3仰望星空与脚踏实地 26
3.2 全局样式 27
3.3 无懈可击的导航栏 30
3.3.1桌面端 30
3.3.2移动端导航栏 37
小结 40
第4章 布局——响应式篇 41
4.1 媒体查询 41
4.1.1为什么需要媒体查询 41
4.1.2什么是媒体查询 44
4.1.3媒体查询中的逻辑 45
4.1.4媒体查询的策略 46
4.1.5导航栏与媒体查询 51
4.1.6polyfill 56
4.2 伸缩布局 58
4.2.1为什么需要伸缩布局 58
4.2.2快速入门 58
4.2.3基本应用 60
4.2.4回归导航栏flexbox.css 62
4.3 相对单位 63
4.3.1相对单位em 65
4.3.2相对单位rem 67
4.3.3如何使用这几种单位 68
4.4 标题布局 70
4.4.1背景 71
4.4.2文字居中 73
4.5 响应式文字 79
4.5.1标题 79
4.5.2正文内容 83
小结 89
第5章 响应式图片 91
5.1 万能的100% 91
5.2 响应式图用例 93
5.3 srcset语法 96
5.3.1移动优先或桌面优先 97
5.3.2计划赶不上变化 98
5.3.3家长式管理 99
5.4
5.4.1sizes 99
5.4.2
5.4.3 polyfill 105
5.4.4
5.5 放弃图片 105
5.5.1事实上我们并不需要图片 105
5.5.2数据URI 105
5.5.3CSS形状 107
5.5.4图标字体 110
5.6 后端方案 118
5.6.1前端配置 118
5.6.2后端配置 119
5.6.3注意 119
5.7 优化标题的背景图片 120
5.7.1image—set 120
5.7.2渐进式图片 120
5.7.3媒体查询 122
5.7.4无需图片 123
小结 124
第6章 脚本与性能:入门篇 125
6.1 为何要选择脚本 125
6.2 为何要谈性能 126
6.3 如何衡量性能 126
6.3.1页面加载时间 127
6.3.2速度指数—加载时间并非万能 129
6.3.3帧数 133
6.3.4工具与测试 136
6.4 传统脚本的性能优化指南 147
6.4.1懒加载初级版本 147
6.4.2优化点1:滚动事件的回调函数 153
6.4.3优化点2:重绘与回流 157
6.4.4优化点3:选择器 161
小结 163
第7章 脚本与性能:提高篇 165
7.1 避免脚本 165
7.1.1样式实现 166
7.1.2脚本实现 168
7.1.3回到导航栏 170
7.2 封装与加载器 175
7.3 性能优化思路 181
7.4 后端能做什么 185
7.4.1RESS 185
7.4.2其他 187
小结 187
第8章 工程问题 189
8.1 安装Node.js 189
8.2 Bower 192
8.2.1什么是Bower 192
8.2.2安装Bower 193
8.2.3使用Bower 194
8.2.4进阶使用 195
8.3 Grunt 198
8.3.1什么是Grunt 198
8.3.2安装Grunt 198
8.3.3使用Grunt 199
8.4 Yeoman 203
8.4.1什么是Yeoman 203
8.4.2安装Yeoman 204
8.4.3生成项目 205
小结 206
后记 207
1. 本站分享的所有书籍均来源于自互联网，我们只进行收集整理，并不对书籍内容进行更改。
2. 部分书籍中可能有书籍压制者放置的广告，这并不是本站所为，请注意甄别。
3. 我们分享这些书籍，纯粹是出于知识分享的热情，以及对互联网分享精神的高度认同和践行，不以盈利为目的。
4. 本站分享的所有书籍，仅供个人学习研究使用，请勿用于任何商业用途，否则产生的一切法律纠纷与本站无关。
5. 如果这些书籍让你有所收获，在条件允许的情况下，请一定购买正版书籍，这是对创作者最好的支持。
6. 如果您是此书籍的版权所有者，且您不希望此作品出现在本站，请联系我们，我们将在收到您的请求后48小时内予以删除。
📖 支持知识自由流动
每一本书的稳定访问，都离不开服务器、存储与带宽的长期维护。
