內容介紹
移動網際網路時代到來了。《回響式Web設計：HTML5和CSS3實戰》將當前Web設計中熱門的回響式設計技術與HTML5和CSS3結合起來，為讀者全面深入地講解了針對各種螢幕大小設計和開發現代網站的各種技術。不僅討論了媒體查詢、流式布局、相對字型、回響式媒體，更將HTML5和CSS3的相關知識點一併講解，是學習最新Web設計技術不可多得的佳作。《回響式Web設計：HTML5和CSS3實戰》適合各個層次的Web開發和設計人員閱讀。
作者介紹
Ben Frain是一名具有十多年經驗的網頁設計師和前端工程師，直接與世界各地的客戶和設計機構並肩工作。同時他還是一名技術記者，定期為一些關注Mac平台、前沿科技、網頁設計和航空技術的刊物撰稿。在此之前，他曾是一名懷才不遇的（而且謙虛謹慎的）電視演員，畢業於索爾福德大學的媒體與表演專業。他寫了四部（自認為）同樣被低估的劇本，而且始終心懷能賣出一部的信念（儘管不像最初那么強烈了）。
工作之餘，在身體（和妻子）允許的情況下，他喜歡玩室內足球。 他的個人網站是www.benfrain.com，Twitter地址是twitter.com/benfrain。
作品目錄
第1章 HTML5、CSS3及回響式設計入門1
1.1 為什麼智慧型手機很重要（而老版的IE不再重要）2
1.2 回響式設計一定是最佳選擇嗎3
1.3 回響式網頁設計的定義3
1.4 為什麼要在回響式設計上停滯不前4
1.5 回響式網頁設計示例4
1.5.1 下載視口調試工具4
1.5.2 線上創意源泉11
1.6 為什麼HTML5很優秀12
1.6.1 省時省力12
1.6.2 新增了語義化標籤元素13
1.7 CSS3為回響式設計和更多創新奠定了基礎13
1.7.1 底線：CSS3不破壞任何東西14
1.7.2 CSS3如何解決日常設計問題14
1.8 看吶，不用圖片17
1.9 HTML5和CSS3現在就能用嗎20
1.10 回響式網頁設計不是靈丹妙藥20
1.11 引導客戶：網站不必在所有瀏覽器中表現一致21
1.12 小結22
第2章 媒體查詢：支持不同的視口23
2.1 現在就能使用媒體查詢23
2.2 為什麼回響式設計需要媒體查詢24
2.2.1 媒體查詢語法24
2.2.2 媒體查詢能檢測那些特性26
2.2.3 用媒體查詢改造我們的設計27
2.2.4 載入媒體查詢的最佳方法27
2.3 我們的第一個回響式設計27
2.3.1 我們的設計是固定寬度的，不要驚訝28
2.3.2 回響式設計中要保證圖片儘可能精簡32
2.3.3 小視口下的內容剪下33
2.4 阻止移動瀏覽器自動調整頁面大小34
2.5 針對不同視口寬度修正設計37
2.6 回響式設計中內容始終優先38
2.7 媒體查詢只是必要條件之一42
2.8 小結42
第3章 擁抱流式布局43
3.1 固定布局經不起未來考驗43
3.2 為什麼回響式設計需要百分比布局44
3.3 將網頁從固定布局修改為百分比布局44
3.3.1 需要牢記的公式45
3.3.2 設定百分比元素的上下文47
3.3.3 必須時刻牢記上下文52
3.4 用em替換px54
3.5 彈性圖片56
3.5.1 讓圖片隨視口縮放56
3.5.2 為特定圖片指定特定規則58
3.5.3 給彈性圖片設定閾值59
3.5.4 超級全能的max-width屬性61
3.6 為不同的螢幕尺寸提供不同的圖片61
3.7 流動格線布局和媒體查詢的默契配合66
3.8 CSS格線系統66
3.9 小結72
第4章 回響式設計中的HTML573
4.1 HTML5的哪些部分現在就能用73
4.1.1 大多數網站可以用HTML5編寫74
4.1.2 膩子腳本和Modernizr74
4.2 如何編寫HTML5網頁75
4.2.1 HTML5的精簡之道76
4.2.2 HTML5標籤的合理寫法76
4.2.3 偉大的<a>標籤萬歲77
4.2.4 HTML的廢棄零件77
4.3 HTML5的全新語義化元素78
4.3.1 <section>78
4.3.2 <nav>79
4.3.3 <article>79
4.3.4 <aside>79
4.3.5 <hgroup>79
4.3.6 <header>81
4.3.7 <footer>81
4.3.8 <address>81
4.4 HTML5結構元素的實際用法81
4.5 HTML5的文本級語義元素87
4.5.1 <b>88
4.5.2 <em>88
4.5.3 <i>88
4.5.4 在頁面中套用文本層語義元素88
4.6 遵循WAI-ARIA實現無障礙站點90
4.7 在HTML5中嵌入媒體93
4.8 用HTML5的方法為頁面添加視頻或音頻93
4.8.1 提供備用的媒體源檔案95
4.8.2 針對老版本瀏覽器的備用方案95
4.8.3 和標籤的用法基本一致96
4.9 回響式視頻96
4.10 離線Web套用99
4.10.1 離線Web套用概述99
4.10.2 讓網頁可離線使用99
4.10.3 理解manifest檔案100
4.10.4 頁面被自動載入到離線快取101
4.10.5 版本注釋的用途101
4.10.6 離線訪問網站101
4.10.7 離線Web套用的故障診斷102
4.11 小結103
第5章 CSS3：選擇器、字型和顏色模式104
5.1 CSS3給前端開發人員帶來了什麼104
5.1.1 Internet Explorer 6到8對CSS3的支持105
5.1.2 使用CSS3設計和開發頁面105
5.2 CSS規則解析105
5.3 私有前綴及其用法106
5.4 快速而有效的CSS技巧108
5.4.1 CSS3多欄布局108
5.4.2 文字換行110
5.5 CSS3的新增選擇器及其用法111
5.5.1 CSS3屬性選擇器111
5.5.2 CSS3結構偽類113
5.5.3 對偽元素的修正122
5.6 自定義網頁字型123
5.6.1 @font-face規則124
5.6.2 使用@font-face嵌入網頁字型124
5.7 幫幫我，標題模糊怎么辦127
5.8 新的CSS3顏色格式和透明度129
5.8.1 RGB顏色130
5.8.2 HSL顏色131
5.8.3 針對IE6、IE7和IE8提供備用顏色值132
5.8.4 透明通道132
5.9 小結134
第6章 用CSS3創造令人驚艷的美135
6.1 文字陰影136
6.1.1 HEX、HSL或RGB顏色都可以136
6.1.2 px、em或rem都行136
6.1.3 取消文字陰影138
6.1.4 製作浮雕文字陰影效果139
6.1.5 多重文字陰影140
6.2 盒陰影140
6.2.1 內陰影141
6.2.2 多重陰影142
6.3 背景漸變143
6.3.1 線性背景漸變144
6.3.2 徑向背景漸變147
6.3.3 重複漸變149
6.4 背景漸變圖案151
6.5 CSS3的回響性153
6.6 組合使用CSS3屬性155
6.7 多重背景圖片159
6.7.1 背景圖片大小161
6.7.2 背景圖片位置161
6.7.3 背景屬性的縮寫語法161
6.8 更多CSS特性162
6.9 可縮放圖示：回響式設計中的完美選擇162
6.10 小結163
第7章 CSS3過渡、變形和動畫164
7.1 什麼是CSS3過渡以及如何使用它164
7.1.1 過渡相關的屬性166
7.1.2 回響式網站中的有趣過渡168
7.2 CSS3的2D變形169
7.3 嘗試CSS3的3D變形174
7.3.1 分析3D變形效果176
7.3.2 3D變形尚未成熟178
7.4 CSS3動畫效果179
7.5 小結185
第8章 用HTML5和CSS3征服表單186
8.1 HTML5表單186
8.1.1 理解HTML5表單中的元素188
8.1.2 placeholder189
8.1.3 required189
8.1.4 autofocus190
8.1.5 autocomplete191
8.1.6 list（及對應的datalist元素）191
8.1.7 HTML5的新輸入類型192
8.1.8 日期和時間輸入類型198
8.2 如何給不支持新特性的瀏覽器打補丁203
8.3 使用CSS3美化HTML5表單204
8.4 小結210
第9章 解決跨瀏覽器問題211
9.1 漸進增強與優雅降級215
9.2 該不該修復老版本IE216
9.2.1 統計數據（再看看世界的變化）216
9.2.2 個人選擇216
9.3 前端的瑞士軍刀：Modernizr217
9.3.1 使用Modernizr輔助修正樣式問題219
9.3.2 使用Modernizr讓老版本IE支持HTML5元素221
9.3.3 給IE6、7、8追加min/max媒體查詢功能222
9.3.4 使用Modernizr按需載入資源223
9.4 必要時將導航連結轉換為下拉選單225
9.5 高解析度設備（未來趨勢）228
9.6 小結231
