基于“響應式內容”的本質，頁面應該在任何合理屏幕大小的設備上看上去都很舒服，我們做設計的就應該站在用戶的角度考慮，一切設計都應該看上去很美、很實用。本書的響應式設計正是基于這一理念，從小到一個圖標，大到完整的頁面布局，都從響應式UI設計入手，適合所有響應式設計的入門人員和中小企業的網站搭建人員學習。
本書分為3篇共11章，第一篇是響應式設計基礎，我們首先介紹清楚到底什么是響應式設計，然后介紹分解響應式設計頁面，包括頁面中的元素、頁面的布局、導航欄、多媒體等；第二篇是響應式設計框架，詳細介紹了目前使用廣泛的Bootstrap框架，包括它的各種樣式設計和特效設計；一篇是實戰，用一個Bootstrap貼吧和HTML5扁平化公司主頁，實踐前面所學的內容。
本書技術新穎、內容精練、結構清晰、注重實戰，適合廣大網頁設計或移動設計初學人員學習，同時也非常適合大中專院校師生學習閱讀，也可作為高等院校計算機及相關專業的教材使用。
是廣受歡迎的HTML、CSS和JS框架，用于開發響應式布局、移動設備優先的Web項目
響應式Web設計（Responsive Web design）的理念是：頁面的設計與開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。換句話說，頁面應該有能力去自動響應用戶的設備環境。
目前，響應式設計仍然在不斷變化，不斷創新。比如，新的設備不斷出來（iPad Pro、iPad Mini 4、小米Note），這讓以前的設計想法土崩瓦解。而各種Web的響應式設計也獲得了越來越多的注意，“讓人們忘記設備尺寸”的理念將更快地驅動響應式設計，所以Web設計也將迎來更多的響應式設計元素。隨著各種移動設備的不斷出現，響應式設計不再新鮮，但卻成為我們UI身邊不可缺少的元素。
本書就是一本梳理響應式設計元素的圖書，它的目的是讓所有UI設計人員找到設計方向，完善設計理念和方法。從而使自己設計的網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
與其他書的區別
（1）細分響應式頁面中的各個元素，從小地方入手，了解響應式設計的精髓。
詳解響應式設計涉及的文字、表單、框架、圖片、視頻等基礎元素，幫讀者一步一步打下響應式設計的基礎。
（2）實例佐證技術的講解方式，每個技術點都伴有實例，讓讀者能看完就學會。
全書的技術點不僅僅有理論知識，還有大量的HTML 5和CSS 3代碼，讓讀者可以看、可以動手，可以通過一點一滴的操作逐步掌握所有技術。
（3）緊貼流行的設計趨勢，讓讀者不僅能學會現在的設計方式，還能看清什么樣的設計才是好的設計和未來的設計。
大部分例子都提供了寬屏和窄屏的設計效果，并講解了各種設計下的書寫技巧。
進階路線
本書共3篇11章，主要章節規劃如下。
第一篇（第1章~第5章）響應式設計基礎篇
講述了響應式設計的由來和簡單發展，通過響應式網頁中的元素、響應式布局、響應式導航、響應式多媒體等4個模塊，詳細介紹了響應式設計中我們需要學習和關注的技術點。
第二篇（第6章~第9章）響應式設計框架篇
講述了如何使用響應式框架Bootstrap，包括它的樣式設計、組件設計、特效設計三大模塊，每個模塊都輔助了很多小例子，讓讀者能一看就會。
第三篇（第10章~第11章）響應式網站設計實戰篇
本篇包含兩個完整案例，一個是利用框架實現的響應式后臺管理，一個是利用扁平式結構實現的公司宣傳主頁。
本書適合的讀者
本書適合任何對 Web設計感興趣的讀者進行閱讀，示例中會涉及一些 HTML和 CSS代碼，理解這些代碼會極大地幫助你深入了解響應式 Web設計開發中的技巧。
前端工程師
設計師
產品經理
架構師
項目經理
大中專院校的學生
可作為各種培訓學校的入門教程
作者簡介
楊旺功，男，畢業于重慶郵電大學，碩士，現任職于北京印刷學院設計藝術學院教師。具有豐富的數字媒體交互產品設計和移動應用UI設計的教學經驗。在數字化藝術與設計領域成果顯著，著有《給設計師看的交互程序設計書——FLASH ACTIONSCRIPT 3.0溢彩編程》《Flex 4.0 RIA開發寶典》等教材，并發表多篇數字化藝術與設計的論文。主要方向是信息與交互設計產品創新設計，對信息與交互設計有深入的研究。
趙榮嬌，女，畢業于中國傳媒大學，工學碩士。目前就職于阿里去啊，擔任前端開發工程師，曾參與旅游特賣首頁、1688訂單等項目開發。熱愛技術，喜歡分享。中國傳媒大學新媒體研究院主辦《信息科技周刊》總編輯、《新媒體技術動態》發起人。
本書第1~5章由阿里去啊的趙榮嬌編寫，第6~11章北京印刷學院設計藝術學院的楊旺功編寫，參與創作的還有陳宇、劉軼、姜永艷、馬飛、王琳、張鑫、張喆、趙海波、肖俊宇、歐陽薇、周瑞、李為民、陳超、杜禮、孔峰。
編者
2016年5月
楊旺功，男，畢業于重慶郵電大學，碩士。現任北京印刷學院設計藝術學院教師，主要研究方向是信息與交互設計產品創新設計，具有豐富的數字媒體交互產品設計和移動應用UI設計的教學經驗。在數字化藝術與設計領域成果顯著，發表多篇數字化藝術與設計的論文，對信息與交互設計有深入的研究。
趙榮嬌，女，畢業于中國傳媒大學，碩士。中國傳媒大學新媒體研究院主辦《信息科技周刊》總編輯，《新媒體技術動態》發起人。目前就職于阿里去啊，擔任前端開發工程師，曾參與旅游特賣首頁、1688訂單等項目開發。熱愛技術，喜歡分享。
第1章 傳說中的響應式設計 1
1.1 支持跨平臺設備的響應式設計 1
1.1.1 什么樣的設計是響應式的 1
1.1.2 響應式設計堅守的4大原則 3
1.2 響應式設計與其他頁面設計的對比 4
1.2.1 固定布局 5
1.2.2 流式布局 7
1.3 實戰：創建一個響應式網頁 9
1.3.1 設置HTML文檔的Meta標簽 9
1.3.2 設計HTML文檔結構 9
1.3.3 使用CSS 3媒介查詢 10
1.3.4 運行第一個響應式頁面 12
1.4 小結 14
第2章 響應式網頁中的元素 15
2.1 文字 15
2.2 表單 18
2.2.1 自定義Radiobox 19
2.2.2 自定義Checkbox動畫 21
2.2.3 美化輸入框 24
2.2.4 下拉框 27
2.3 框架 28
2.3.1 傳統的iFrame框架 29
2.3.2 響應式的iFrame框架 29
2.4 實戰：實現一個響應式登錄表單 31
2.4.1 設置登錄表單的HTML結構 31
2.4.2 設計登錄表單的通用樣式 33
2.4.3 使用CSS 3媒介查詢實現響應式登錄表單 35
2.5 小結 37
第3章 響應式布局 38
3.1 布局切換 38
3.2 側邊欄 40
3.3 寬高等比例變化 44
3.4 列表 46
3.4.1 定義列表分級菜單 46
3.4.2 列表切換效果 48
3.5 表格 52
3.5.1 簡單自適應表格 52
3.5.2 翻轉滾動表格 55
3.5.3 隱藏表格欄目 60
3.6 實戰：響應式商品展示列表 61
3.7 小結 64
第4章 響應式導航 65
4.1 響應式導航菜單設計五大原則 65
4.1.1 按照優先級顯示內容 65
4.1.2 用創造力來處理有限的空間 66
4.1.3 下拉菜單 66
4.1.4 給導航菜單換位置 66
4.1.5 放棄導航菜單 66
4.2 導航類型 66
4.2.1 單層導航 67
4.2.2 多層導航 70
4.2.3 面包屑導航 72
4.3 頁碼設計 73
4.4 小結 75
第5章 響應式多媒體 76
5.1 圖標的響應式 76
5.2 圖像 78
5.2.1 可適配的圖像 78
5.2.2 圖像網格 80
5.3 視頻 84
5.3.1 內嵌視頻響應式的難點 85
5.3.2 從其他網站中手動嵌入視頻 85
5.4 響應式圖表 86
5.4.1 一款響應式圖表庫 86
5.4.2 帶Tooltip提示的線形圖 88
5.4.3 簡單的餅圖 91
5.5 小結 93
第6章 Bootstrap入門 94
6.1 初次接觸Bootstrap 94
6.1.1 Bootstrap的優勢 94
6.1.2 下載Bootstrap 96
6.2 在網站中引入Bootstrap 97
6.3 調用Bootstrap的樣式 98
6.4 調用Bootstrap的組件 100
6.5 調用Bootstrap的js特效 101
6.6 實戰：一個Bootstrap實現的響應式頁面V1.0 102
6.7 小結 104
第7章 Bootstrap的樣式設計 105
7.1 字體 105
7.1.1 標題 105
7.1.2 全局字體和段落 106
7.2 表格 107
7.2.1 基本用法 108
7.2.2 表格的附加樣式 108
7.2.3 為表格行或單元格添加狀態標識 110
7.2.4 響應式表格 112
7.3 表單 112
7.4 按鈕 115
7.4.1 按鈕的基本樣式 115
7.4.2 調節按鈕大小 116
7.4.3 塊級按鈕 117
7.4.4 為按鈕設置不可點擊樣式 118
7.5 圖片 118
7.5.1 圖片類 118
7.5.2 響應式圖片 119
7.6 Bootstrap工具類 119
7.6.1 響應式工具 119
7.6.2 工具類 120
7.7 實戰：Bootstrap響應式頁面V2.0 122
7.8 小結 123
第8章 Bootstrap的組件設計 124
8.1 下拉菜單 124
8.2 按鈕組 125
8.2.1 垂直排列的按鈕組 126
8.2.2 兩端對齊的按鈕組 126
8.2.3 嵌套按鈕組 127
8.3 input控件組 128
8.3.1 最常見的搜索框 128
8.3.2 帶提示的搜索框 128
8.4 導航 129
8.4.1 膠囊式導航 129
8.4.2 面包屑導航 130
8.4.3 頭部導航 130
8.5 列表組 133
8.6 分頁 134
8.6.1 普通的分頁 134
8.6.2 上一頁/下一頁 135
8.7 標簽 136
8.8 面板 137
8.9 進度條 139
8.10 縮略圖 140
8.11 實戰：Bootstrap響應式頁面V3.0 142
8.12 小結 143
第9章 Bootstrap的特效設計 144
9.1 模態對話框 144
9.2 標簽頁切換 146
9.3 Tootip 147
9.4 彈出框 147
9.5 折疊 148
9.6 幻燈片 149
9.7 實戰：Bootstrap響應式頁面V4.0 151
9.8 小結 153
第10章 使用Bootstrap實現一個百度貼吧后臺 154
10.1 確定后臺管理的需求 154
10.2 設計頁面布局 155
10.2.1 引入Bootstrap 3框架 155
10.2.2 實現頁面布局代碼 156
10.3 設計導航欄 157
10.3.1 構建導航的整體架構 157
10.3.2 設計標題和導航鏈接 158
10.3.3 實現搜索框和通知系統 158
10.3.4 實現管理員的登錄信息 159
10.3.5 構建響應式導航 160
10.4 設計左側邊欄 162
10.5 設計主功能部分 163
10.5.1 主功能的頭部 163
10.5.2 主功能的帖子列表 165
10.6 小結 168
第11章 使用HTML 5設計扁平化的公司主頁 169
11.1 響應式設計的關鍵 169
11.2 導航欄的設計 170
11.2.1 列表的實現 170
11.2.2 彈出式菜單的實現 174
11.3 主功能部分的設計 176
11.3.1 什么是視差滾動效果 176
11.3.2 視差效果的實現 176
11.3.3 圖文列表的實現 178
11.4 小結 183
附錄 CSS 3選擇器使用一覽 184
f1.1 標簽選擇器 184
f1.2 類選擇器 184
f1.3 id選擇器 185
f1.4 通配符選擇器 186
f1.5 子元素選擇器 186
f1.6 后代元素選擇器 187
f1.7 相鄰元素選擇器 187
f1.8 屬性選擇器 188
f1.9 組選擇器 188
f1.10 復合選擇器 189
f1.11 結構化偽類 190
f1.12 目標偽類:target 195
f1.13 狀態偽類 195
f1.14 否定偽類:not(S) 196
新書資訊