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