響應式Web

第1部分 響應式之道
1開啟響應式之路
1.1初探響應式Web
1.1.1什麼是響應式Web
1.1.2關鍵特性
1.2構建第一個響應式網站
1.2.1創建網站原型
1.3響應式布局基礎
1.3.1移動優先標簽
1.3.2在CSS中使用百分比
1.3.3添加文本和圖像
1.3.4強大易變的em
1.3.5設置第一個斷點
1.4總結
1.5討論的觀點

2移動優先的設計
2.1為何選擇移動優先設計
2.1.1移動優先設計的優點
2.1.2移動優先設計的挑戰
2.2為小屏幕設計頭部
2.2.1創建頭部
2.3設計觸屏界面交互
2.3.1簡約的小屏幕網格
2.4為小屏幕設計內容
2.4.1在布局中使用Web字體
2.5總結
2.6討論的觀點

第2部分 響應式Web設計之旅
3使用樣式板表達設計
3.1利用設計指南進行可視化設計
3.1.1設計指南是什麼
3.1.2開發一個設計指南
3.1.3樣式板：創建一種視覺語言
3.2如何創建一個樣式板
3.2.1獲得反饋
3.2.2設計樣式板
3.2.3創建樣式板
3.2.4利用樣式板進行迭代設計
3.3模型之死
3.4總結
3.5討論的觀點

4響應式用戶體驗設計模式
4.1一級導航
4.1.1toggle導航模式
4.1.2selectmenu導航模式
4.1.3toggle導航和selectmenu導航的比較
4.2多級toggle導航
4.3響應式用戶體驗設計模式資源
4.4總結
4.5討論的觀點

5響應式布局
5.1利用百分比進行流式布局
5.1.1CSS中的百分比是如何工作的
5.1.2box—sizing
5.1.3流式網格系統
5.2構建一個流式布局
5.2.1解讀原型
5.2.2開始編碼
5.2.3讓off—canvas元素動起來
5.2.4使元素具有響應性
5.2.5拓展到更寬的視圖
5.3總結
5.4討論的觀點
6添加內容模塊和排版
6.1添加內容模塊
6.1.1創建有用的內容占位符
6.2響應式設計中的排版
6.2.1嵌入式字體
6.2.2設置一個排版基礎
6.3總結
6.4討論的觀點

第3部分 用代碼來延伸設計
7用CSS在瀏覽器中增加圖形
7.1利用CSS實現設計
7.1.1CSS基礎
7.1.2在流體結構中維持比例
7.2在你的設計中使用icon字體
7.2.1在用戶界面中使用雪碧圖
7.2.2基於字體的用戶界面圖形
7.3使用可縮放矢量圖形
7.3.1為頁面添加SVG圖像
7.3.2用CSS實現SVG
7.3.3SVG格式的局限性
7.4總結
7.5討論的觀點

8漸進增強和Modernizr的過時控制
8.1技術性過時
8.1.1漸進增強
8.1.2優雅降級
8.2Modernizr是什麼
8.2.1初始化Modernizr
8.2.2利用Modernizr寫跨瀏覽器的CSS
8.3用Modernizr進行JavaScript特性檢測
8.3.1檢測觸摸能力
8.3.2使用Modernizr.load和yepnope
8.3.3創建定制的Modernizr測試
8.4在網站中添加Modernizr
8.5總結
8.6討論的觀點

9響應式網站的測試和優化
9.1什麼是響應式測試
9.1.1模擬測試環境
9.2用於測試的瀏覽器工具
9.3使用Web審查器
9.3.1掌握Web審查器
9.4降低請求時間的技巧
9.4.1減少HTTP請求
9.4.2用Base64編碼減少圖片請求
9.4.3加載速度的優化清單
9.5總結
9.6討論的觀點

附錄A設計中的卜下文感知計算
A.1移動應用中的上下文感知
A.2Web中的上下文感知
A.2.1上下文斷點
A.2.2創建上下文測試
A.2.3CSS上下文
A.3總結
附錄BFoundation框架