包邮响应式设计.改造与优化

第 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

ipad80
iphone.4s以下. ............................81
iphone.5和 5s.............................82
nexus.7（第二代）.......................82
galaxy.s4....................................83

小结. .......83

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

web字体. ............................................85

字体格式.......................................85
ttf86
eot86
woff..........................................86
svg............................................87

浏览器和设备支持.................................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的解决方案