響應(yīng)式Web目錄

時間：2023-02-18 15:34:02 | 來源：營銷百科

時間：2023-02-18 15:34:02 來源：營銷百科

響應(yīng)式Web目錄：第1部分　響應(yīng)式之道

1　開啟響應(yīng)式之路 ..........3

1.1　初探響應(yīng)式Web ................................... 5

1.1.1　什么是響應(yīng)式 Web .................. 5

1.1.2　關(guān)鍵特性 .................................. 8

1.2　構(gòu)建第一個響應(yīng)式網(wǎng)站 .................... 10

1.2.1　創(chuàng)建網(wǎng)站原型 ........................ 11

1.3　響應(yīng)式布局基礎(chǔ) ................................ 18

1.3.1　移動優(yōu)先標簽 ........................ 19

1.3.2　在 CSS中使用百分比 ........... 24

1.3.3　添加文本和圖像 .................... 28

1.3.4　強大易變的 em ...................... 30

1.3.5　設(shè)置第一個斷點 .................... 33

1.4　總結(jié) ...................................... 34

1.5　討論的觀點 ................................ 35

2　移動優(yōu)先的設(shè)計 ........ 37

2.1　為何選擇移動優(yōu)先設(shè)計 .................... 38

2.1.1　移動優(yōu)先設(shè)計的優(yōu)點 ............ 39

2.1.2　移動優(yōu)先設(shè)計的挑戰(zhàn) ............ 40

2.2　為小屏幕設(shè)計頭部 ............................ 42

2.2.1　創(chuàng)建頭部 ................................ 42

2.3　設(shè)計觸屏界面交互 ............................ 44

2.3.1　簡約的小屏幕網(wǎng)格 ................ 45

2.4　為小屏幕設(shè)計內(nèi)容 ............................ 47

2.4.1　在布局中使用 Web字體 ....... 48

2.5　總結(jié) .................................. 51

2.6　討論的觀點 ............................. 51

第2部分　響應(yīng)式Web設(shè)計之旅

3　使用樣式板表達設(shè)計.. 55

3.1　利用設(shè)計指南進行可視化設(shè)計 ........ 56

3.1.1　設(shè)計指南是什么 .................... 57

3.1.2　開發(fā)一個設(shè)計指南 ................ 58

3.1.3　樣式板：創(chuàng)建一種視覺語言 59

3.2　如何創(chuàng)建一個樣式板 ........................ 60

3.2.1　獲得反饋 ................................ 61

3.2.2　設(shè)計樣式板 ............................ 61

3.2.3　創(chuàng)建樣式板 ............................ 63

3.2.4　利用樣式板進行迭代設(shè)計 .... 68

3.3　模型之死 ........................... 69

3.4　總結(jié) ...................................... 70

3.5　討論的觀點 ............................ 70

4　響應(yīng)式用戶體驗設(shè)計模式 ....................... 71

4.1　一級導(dǎo)航 ............................................ 73

4.1.1　toggle導(dǎo)航模式 ..................... 74

4.1.2　select menu導(dǎo)航模式 ............ 79

4.1.3　toggle導(dǎo)航和 select menu導(dǎo)航的比較 .............. 81

4.2　多級toggle導(dǎo)航 ................................ 82

4.3　響應(yīng)式用戶體驗設(shè)計模式資源 ........ 87

4.4　總結(jié) .................................................... 87

4.5　討論的觀點 ........................................ 88

5　響應(yīng)式布局............... 89

5.1　利用百分比進行流式布局 ................ 90

5.1.1　CSS中的百分比是如何工作的 ...................... 90

5.1.2　box-sizing ............................... 94

5.1.3　流式網(wǎng)格系統(tǒng) ........................ 97

5.2　構(gòu)建一個流式布局 .......................... 101

5.2.1　解讀原型 .............................. 101

5.2.2　開始編碼 .............................. 102

5.2.3　讓 off-canvas元素動起來 ... 105

5.2.4　使元素具有響應(yīng)性 .............. 106

5.2.5　拓展到更寬的視圖 .............. 109

5.3　總結(jié) .................................... 110

5.4　討論的觀點 ...................................... 110

6　添加內(nèi)容模塊和排版.113

6.1　添加內(nèi)容模塊 .................................. 115

6.1.1　創(chuàng)建有用的內(nèi)容占位符 ...... 116

6.2　響應(yīng)式設(shè)計中的排版 ...................... 121

6.2.1　嵌入式字體 .......................... 121

6.2.2　設(shè)置一個排版基礎(chǔ) .............. 123

6.3　總結(jié) ..................................... 126

6.4　討論的觀點 ...................................... 126

第3部分　用代碼來延伸設(shè)計

7　用CSS在瀏覽器中增加圖形......................129

7.1　利用CSS實現(xiàn)設(shè)計 ........................... 130

7.1.1　CSS基礎(chǔ) .............................. 131

7.1.2　在流體結(jié)構(gòu)中維持比例 ...... 133

7.2　在你的設(shè)計中使用icon字體 ........... 136

7.2.1　在用戶界面中使用雪碧圖 .. 137

7.2.2　基于字體的用戶界面圖形 .. 138

7.3　使用可縮放矢量圖形 ...................... 140

7.3.1　為頁面添加 SVG圖像 ........ 141

7.3.2　用 CSS實現(xiàn) SVG ................ 144

7.3.3　SVG格式的局限性 ............. 146

7.4　總結(jié) .................................. 147

7.5　討論的觀點 ...................................... 148

8　漸進增強和Modernizr的過時控制....................149

8.1　技術(shù)性過時 ...................................... 150

8.1.1　漸進增強 .............................. 150

8.1.2　優(yōu)雅降級 .............................. 154

8.2　Modernizr是什么 ............................. 155

8.2.1　初始化 Modernizr ................ 157

8.2.2　利用 Modernizr寫跨瀏覽器的 CSS ..................... 159

8.3　用Modernizr進行JavaScript特性檢測 .................. 162

8.3.1　檢測觸摸能力 ...................... 163

8.3.2　使用 Modernizr.load和 yepnope ....................... 164

8.3.3　創(chuàng)建定制的 Modernizr測試 ............................. 165

8.4　在網(wǎng)站中添加Modernizr ................. 166

8.5　總結(jié) ........................................ 169

8.6　討論的觀點 ...................................... 170

9　響應(yīng)式網(wǎng)站的測試和優(yōu)化 ..........................171

9.1　什么是響應(yīng)式測試 .......................... 172

9.1.1　模擬測試環(huán)境 ...................... 172

9.2　用于測試的瀏覽器工具 .................. 176

9.3　使用Web審查器 ............................... 177

9.3.1　掌握 Web審查器 ................. 178

9.4　降低請求時間的技巧 ...................... 182

9.4.1　減少 HTTP請求 .................. 183

9.4.2　用 Base64編碼減少圖片請求 ...................... 184

9.4.3　加載速度的優(yōu)化清單 .......... 184

9.5　總結(jié) ................................. 186

9.6　討論的觀點 ................................. 186

附錄A　設(shè)計中的上下文感知計算 .......................187

A.1　移動應(yīng)用中的上下文感知 ............. 188

A.2　Web中的上下文感知 ...................... 189

A.2.1　上下文斷點 ........................ 190

A.2.2　創(chuàng)建上下文測試 ................ 192

A.2.3　CSS上下文 ........................ 195

A.3　總結(jié) .................................. 196

附錄B　Foundation框架