目錄
第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 ＜picture＞元素 99
5.4.1sizes 99
5.4.2＜picture＞元素和＜source＞元素 102
5.4.3 polyfill 105
5.4.4 ＜picture＞元素的未來 105
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
· · · · · · (收起)