响应式设计,改造与优化目录

时间：2023-02-17 08:44:01 | 来源：营销百科

时间：2023-02-17 08:44:01 来源：营销百科

响应式设计,改造与优化目录：第 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

Pure.Grids...................................30

Bootstrap.....................................30

Foundation..................................31

Gridpak........................................31

Golden.Grid.System.....................32

Skeleton......................................32

使用响应式栅格. ....................................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

viewport.meta标签..............................71

实现突变点...........................................73

使用媒体查询. ................................74

IE6-8浏览器支持. .........................80

设备专属的媒体查询..............................80

iPad..................80

iPhone.4S以下. ............................81

iPhone.5和 5S.............................82

Nexus.7（第二代）.......................82

Galaxy.S4....................................83

小结. .......83

第 7章　排版设计................................ 84

Web字体. ............................................85

字体格式.......................................85

浏览器和设备支持.................................87

设备差异.......................................87

浏览器行为....................................89

提供 Web字体..............................91

使用字体服务. .......................................93

Google字体.................................93

Adobe.Typekit..............................94

Fonts.com...................................94

Font.Squirrel................................95

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

Akamai......................................133

Brightcove.................................133

Vimeo........................................134

YouTube....................................135

制作适配移动设备的视频. .....................136

使用固定比例. ..............................137

使用本地播放器...........................140

使用插件.....................................141

小结. .....142

第 11章　图像压缩............................. 143

图片类型............................................144

JPEG/JPG.................................144

GIF............................................146

PNG..........................................147

WebP........................................148

缩工具............................................150

JPEGmini...................................150

PNGGauntlet.............................151

图像优化工具 Radical..................151

ImageAlpha...............................151

ImageOptim...............................153

TinyPNG....................................153

压缩结果............................................154

小结. .....155

第 3部分　性能优化

第 12章　条件.JavaScript. ................ 158

为什么使用条件 JavaScript. .................159

滑块...........................................160

图片库........................................160

使用条件 JavaScript...........................162

JavaScript媒体查询....................163

使用 JavaScript插件..........................168

jRespond...................................168

mediaCheck...............................169

ConditionerJS............................169

小结. .....170

第 13章　Web组件............................ 171

使用 Web组件...................................172

Web组件示例....................................172

音频元素.....................................172

视频元素.....................................174

日期输入.....................................175

使用 DOM处理.. .................................176

Shadow.DOM............................177

使用模板.....................................178

编辑内容.....................................179

Web组件 Polyfill................................180

Polymer.....................................181

Polymer元素..............................181

X-Tag.......................................182

使用 Brick...................................183

小结. .....183

第 14章　设备检测与服务器请求. .......... 185

设备检测............................................186

使用脚本检测. ..............................186

读取 user-agent字符串. ..............188

实现设备数据库...........................190

HTTP头部. ........................................191

使用客户端提示. ..................................194

小结. .....196

第 15章　服务器优化. ..........................197

服务器配置.........................................198

Web.服务器.......................................198

Apache......................................198

Nginx.........................................199

IIS.199

Tomcat......................................200

NodeJS.....................................200

服务器插件.........................................201

SPDY........................................201

Cache........................................205

PageSpeed................................207

小结. .....210

第 16章　高性能与开发工具. ................. 211

开发工具............................................212

浏览器开发者工具...............................212

Chrome.开发者工具.. ...................212

Firefox.......................................218

Internet.Explorer........................223

构建工具............................................226

Grunt.........................................226

Gulp...........................................228

小结. .....229