學習響應式設計(Learning Responsive Web Design)完整版PDF
想要為平板、手機、筆記本、大屏幕設備，甚至可穿戴設備提供最優的用戶體驗？那就學習響應式設計吧。這是一本內容特別全面、講解非常透徹的入門書。特別地，通過這本書不僅能迅速掌握響應式Web設計的基本原理，還能夠從頭到尾了解響應式設計的工作流程：從項目啟動開始，到項目最終上線為止。
只要你的工作與創建、改造或者升級網站有關系，都應該看看這本書。換句話說，不僅是前端開發人員，設計師、產品經理、項目經理，甚至後端開發人員也可以通過本書掌握響應式設計的精髓所在。這本書基於響應式設計的前沿技術和社區經驗寫成，匯集了前人的智慧和最佳實踐。希望讀者能夠“站在巨人的肩膀上”，把這本書的內容應用到未來的項目中，造福更多用戶。
- 內容策略的制定應先於視覺設計
- 默認設計應針對最窄屏幕寬度進行
- 響應式Web設計的關鍵：HTML元素和CSS屬性
- 基於設備視口寬度，通過媒體查詢顯示不同的CSS樣式
- 處理圖像、文字排版和導航
- 采用性能優化技術建立更輕量級、更快的網站
下載地址：
學習響應式設計(Learning Responsive Web Design)完整版PDF
目錄
前言 XV
第一部分 響應式設計基礎
第1章 什麽是響應式設計 3
1.1 一點兒基礎 3
1.2 簡史 6
1.2.1 固定寬度設計 6
1.2.2 移動Web 瀏覽 7
1.2.3 移動網站 8
1.2.4 更多的設備 9
1.2.5 媒體查詢 10
1.2.6 靈活性 11
1.2.7 響應式網頁設計 12
1.3 為什麽是響應式設計 12
1.3.1 每個設備都得到正確的設計 12
1.3.2 更少的工作 14
1.3.3 搜索優化 14
1.4 總結 15
第2章 響應式內容 16
2.1 內容策略 16
2.2 內容整理 18
2.2.1 僅使用你需要的 18
2.2.2 如何精簡 19
2.2.3 內容審計 20
2.3 內容編寫 20
2.3.1 用戶如何閱讀 20
2.3.2 簡明的語言 22
2.4 內容平等 23
2.5 內容管理 24
2.6 自適應內容 24
2.7 總結 27
第二部分 創建響應式網站
第3章 響應式網站之HTML 31
3.1 使用HTML 32
3.1.1 HTML 版本 32
3.1.2 Web 標準 33
3.1.3 使用HTML5 33
3.2 頁面基本結構 34
3.2.1 文檔類型聲明 34
3.2.2 文檔結構 34
3.2.3 頁面標題 35
3.2.4 字符集 36
3.3 視口 37
3.3.1 寬度 40
3.3.2 初始縮放比 40
3.3.3 用戶可縮放 40
3.3.4 最大縮放比 41
3.4 結構性元素 41
3.4.1 屏幕閱讀器 42
3.4.2 <header> 43
3.4.3 <nav> 43
3.4.4 <footer> 43
3.4.5 <article> 44
3.4.6 <aside> 44
3.4.7 IE 支持 44
3.5 創建一個頁面 45
3.5.1 結構性元素 45
3.5.2 加入內容 46
3.5.3 無樣式頁面 47
3.6 清晰和語義化的HTML 48
3.6.1 分離內容與表現 48
3.6.2 註釋 49
3.7 總結 50
第4章 響應式網站之CSS 51
4.1 CSS 的工作方式 52
4.2 CSS 版本 53
4.3 置CSS 於何處 57
4.3.1 嵌入式樣式 57
4.3.2 樣式表 58
4.3.3 內聯樣式 59
4.4 層疊 59
4.4.1 層疊的作用方式 59
4.4.2 重要的規則 60
4.4.3 內聯樣式 60
4.4.4 ID 選擇器 60
4.4.5 類、屬性和偽類選擇器 61
4.4.6 元素與偽元素選擇器 61
4.4.7 繼承規則 61
4.4.8 默認值 62
4.4.9 發生沖突怎麽辦 62
4.5 使用層疊 62
4.5.1 默認值和重置 63
4.5.2 繼承規則 64
4.5.3 元素規則 64
4.5.4 其他規則 65
4.5.5 保持簡單 65
4.6 註釋 66
4.7 組織你的樣式表 66
4.8 盒模型 67
4.8.1 度量單位 68
4.8.2 em 68
4.8.3 高度與寬度 69
4.8.4 外邊距與內邊距 70
4.8.5 邊框 71
4.8.6 盒子大小 72
4.9 顯示 74
4.10 定位 75
4.10.1 靜態定位 75
4.10.2 相對定位 75
4.10.3 絕對定位 76
4.10.4 固定定位 77
4.10.5 定位元素的度量單位 78
4.11 浮動和清除 79
4.12 基本樣式 81
4.13 總結 83
第5章 媒體查詢 85
5.1 何為媒體查詢 85
5.2 媒體查詢結構 87
5.3 在樣式表鏈接中使用媒體查詢 89
5.4 使用媒體查詢的其他方式 90
5.5 我們可以查詢什麽 91
5.5.1 視口寬度和高度 91
5.5.2 屏幕寬度與高度 92
5.5.3 方向 92
5.5.4 寬高比 92
5.5.5 分辨率 93
5.5.6 其他媒體特性 93
5.6 瀏覽器支持 94
5.6.1 IE 條件註釋 94
5.6.2 測試媒體查詢結果 96
5.7 斷點 96
5.8 設計範圍 97
5.9 響應式設計 98
5.9.1 漸進增強 98
5.9.2 用網格進行設計 99
5.9.3 使用網格列 100
5.9.4 優先為小屏幕設計 101
5.10 使用媒體查詢 102
5.11 兩列布局 102
5.11.1 使用浮動 103
5.11.2 使用網格 105
5.11.3 加入媒體查詢 107
5.12 設置最大寬度 108
5.13 如何選擇斷點 109
5.14 總結 110
第6章 圖像 111
6.1 顯示圖像的方式 112
6.1.1 CSS 替代方案 112
6.1.2 內容圖像 113
6.1.3 背景圖像 113
6.1.4 圖像拼合 113
6.1.5 圖標字體 114
6.2 替代文本 115
6.3 圖像文件格式 118
6.3.1 JPEG 119
6.3.2 GIF 119
6.3.3 PNG 120
6.3.4 SVG 120
6.4 優化圖像 121
6.4.1 像素與分辨率 121
6.4.2 高密度屏幕 122
6.4.3 壓縮圖像 123
6.4.4 實際尺寸 124
6.5 內容圖像 126
6.5.1 <img> 元素 126
6.5.2 加入圖像 127
6.5.3 靈活的圖像尺寸 129
6.5.4 媒體查詢 130
6.5.5 最大寬度 132
6.5.6 用圖像敘事 134
6.6 背景圖像 134
6.6.1 加入背景圖像 135
6.6.2 對齊 136
6.7 響應式圖像 137
6.7.1 建議的客戶端解決方案 138
6.7.2 其他解決方案 139
6.7.3 斷點 143
6.8 總結 145
第三部分 玩轉響應式設計
第7章 響應式設計工作流程 149
7.1 策略與規劃 149
7.1.1 用戶研究 150
7.1.2 內容 150
7.2 內容先於布局 152
7.2.1 內容組件 152
7.2.2 以文本模式進行設計 153
7.2.3 線性設計 155
7.2.4 內容層次 155
7.3 考慮布局 155
7.3.1 草圖繪制 155
7.3.2 從小屏幕開始 156
7.3.3 移動優先 157
7.4 原型 158
7.4.1 線框圖與原型 158
7.4.2 線框圖 158
7.4.3 響應式原型 159
7.4.4 原型中有什麽 160
7.4.5 從基礎開始 160
7.4.6 創建頁面布局 160
7.4.7 框架 162
7.4.8 原型創建工具 163
7.5 視覺設計 164
7.5.1 樣式板 164
7.5.2 測試與調整 165
7.5.3 風格指南 166
7.6 響應式設計工具 168
7.6.1 Adobe Photoshop 168
7.6.2 Adobe InDesign 168
7.6.3 Adobe Edge Reflow 169
7.6.4 Adobe Dreamweaver 170
7.6.5 瀏覽器 171
7.7 推銷響應式設計 172
7.7.1 為什麽要用響應式設計 172
7.7.2 教育你的客戶 173
7.7.3 強調響應性 173
7.7.4 響應式設計並不總是最佳選擇 174
7.7.5 費用 174
7.8 與客戶合作 175
7.8.1 交付物 175
7.8.2 陳述報告 176
7.9 總結 177
第8章 豈止手機 178
8.1 用戶體驗 178
8.1.1 用戶至上 179
8.1.2 手機用戶的謬見 180
8.1.3 為應用環境設計 180
8.1.4 只用手機的用戶 181
8.1.5 使用多個設備 182
8.2 設備無關的設計 182
8.3 專註於移動優先 183
8.4 盡你所能 183
8.5 設備類型 186
8.5.1 手機 186
8.5.2 平板電腦 187
8.5.3 其他設備 187
8.5.4 臺式電腦與筆記本電腦 188
8.6 觸摸 188
8.6.1 電容式觸摸 189
8.6.2 多點觸摸 189
8.6.3 手勢 189
8.6.4 JavaScript 事件 190
8.6.5 觸摸目標大小 191
8.6.6 導航位置 193
8.7 屏幕尺寸 194
8.8 可訪問性（通用化設計） 196
8.8.1 視覺 197
8.8.2 音頻 199
8.8.3 輸入方法 200
8.8.4 認知障礙 201
8.9 決定支持哪些設備 201
8.10 為何要用真實設備進行測試 202
8.10.1 設備實驗室 203
8.10.2 購買設備 203
8.11 測試 203
8.11.1 驗證器 204
8.11.2 在瀏覽器窗口調整 204
8.11.3 瀏覽器工具 204
8.11.4 瀏覽器與操作系統 205
8.11.5 仿真器與模擬器 206
8.11.6 輔助技術 207
8.12 總結 207
第四部分 設計響應式網站
第9章 文字排版 211
9.1 始於HTML 212
9.2 字型 212
9.3 使用字體 214
9.3.1 設計良好的字體 214
9.3.2 自托管字體 214
9.3.3 字體服務 215
9.3.4 鏈接字體文件 216
9.3.5 創建字體棧 217
9.4 調整文字大小 218
9.4.1 忘掉像素 218
9.4.2 屏幕距離 218
9.4.3 絕對與相對 219
9.4.4 設置默認字體大小 220
9.4.5 為什麽是100% 220
9.4.6 度量單位 221
9.4.7 字體大小間的關系 225
9.4.8 行高 225
9.5 行長 227
9.5.1 測試行長 228
9.5.2 調整外邊距及字體大小 229
9.5.3 斷字 231
9.5.4 溢出換行 232
9.6 留白 233
9.7 內邊距和外邊距 234
9.8 為屏幕尺寸改變字型 234
9.9 總結 235
第10章 導航及頁眉布局 237
10.1 響應式導航 237
10.1.1 從小屏開始 238
10.1.2 樣式化列表 238
10.1.3 水平導航 240
10.2 網站品牌 243
10.3 導航鏈接 245
10.3.1 靈活性 245
10.3.2 用戶想要做什麽 245
10.3.3 基於目標的導航 247
10.3.4 保持一致性 248
10.3.5 保持簡單 250
10.4 導航模式 250
10.4.1 頂部導航 252
10.4.2 頁腳導航 254
10.4.3 切換式推出型導航 256
10.4.4 切換式覆蓋型導航 260
10.4.5 部分優先型導航 260
10.4.6 選擇菜單型導航 261
10.4.7 抽屜式導航 263
10.4.8 底部導航 264
10.4.9 跳過子導航 266
10.4.10 被拋棄的導航 267
10.4.11 用於寬屏幕的固定菜單 269
10.5 頁眉 270
10.5.1 極簡頁眉 270
10.5.2 復雜頁眉 271
10.5.3 導航圖標 273
10.5.4 其他圖標 275
10.6 總結 277
第11章 性能 279
11.1 性能的重要性 280
11.2 性能作為設計元素 280
11.2.1 網絡連接 281
11.2.2 平衡 281
11.2.3 臃腫的網絡 281
11.3 網頁加載與渲染方式 282
11.3.1 延遲 283
11.3.2 DNS 請求 283
11.3.3 重定向 284
11.3.4 HTTP 請求 284
11.3.5 發送HTML 文件 284
11.3.6 解壓 285
11.3.7 DOM 285
11.3.8 渲染<head> 元素 286
11.3.9 渲染<body> 元素 287
11.3.10 onload 事件 287
11.4 性能測量 287
11.5 清理代碼 289
11.5.1 使用簡單直接的代碼 289
11.5.2 縮小 290
11.6 將HTTP 請求減至最少 291
11.6.1 串聯 291
11.6.2 第三方代碼 292
11.6.3 圖像拼合 293
11.7 服務器設置 293
11.7.1 避免重定向 293
11.7.2 文件壓縮 294
11.7.3 瀏覽器緩存 295
11.8 JavaScript 296
11.8.1 JavaScript 做什麽 296
11.8.2 JavaScript 的工作方式 296
11.8.3 阻塞式JavaScript 297
11.8.4 JavaScript 庫 300
11.9 CSS 301
11.10 托管 302
11.10.1 內容分發網絡 302
11.10.2 內容管理系統 303
11.11 有條件地加載內容 303
11.12 重繪與回流 305
11.13 RESS 305
11.14 總結 307
學習響應式設計(Learning Responsive Web Design)完整版PDF