本書介紹了響應式網頁設計的技術架構及設計要領，使用HTML與CSS設計網站的基本策略與技術，以及響應式網頁設計的模塊應用，包括自適應/響應式網頁設計的概述、網頁新舊切版的方式和字體資源、版型尺寸的固定與彈性、Bootstrap的學習與使用、Foundation的學習與使用、Pure的學習與使用。
序1
響應式網頁設計就是本書的核心。在智能手機、平板電腦等移動設備大行其道的時候，網頁設計人員如果不會靈活和熟練地運用響應式網頁設計技術將電腦桌面網頁設計技術拓展到移動設備上，那么不但自己會疲于奔命，而且最終會被市場 淘汰。
本書以豐富的范例程序和詳細的圖解逐一講解響應式網頁設計的核心技術和方法，這種網頁設計技術和方法會根據用戶所使用設備的瀏覽器環境（例如屏幕的長度、寬度、長寬比、分辨率或設備屏幕顯示的方向等）自動調整網頁的版面，將恰當的內容和最佳的顯示結果提供給用戶。簡而言之，就是網頁設計人員只要設計統一版本的網頁程序，就能在電腦、智能手機和平板電腦等各種設備上完整展示網頁內容，而無需為不同屏幕大小和功能的設備分別設計和改寫網頁程序。
本書涉及的內容包括HTML4、HTM5、JavaScript和CSS，讀者需要具備一些相關方面的知識，才能在學習時事半功倍。
HTML5 標準相對比較新，并不是所有的瀏覽器或者它們的舊版本都能完整地支持本書中含有HTML5語言功能的部分范例程序。要正確地運行這些范例程序，建議使用最新版本的瀏覽器，本書的所有范例程序都在Chrome 版本47（谷歌的瀏覽器）上調試并通過。
當然，支持HTML5的瀏覽器還有Windows 10中的Microsoft Edge、Internet Explorer 11、Opera 版本33.0以上以及Firefox（火狐瀏覽器）和Safari等的最新版本。另外，還有國內的 QQ瀏覽器、獵豹瀏覽器等的新版本。如果讀者想在這些瀏覽器上運行 HTML5 的程序，請先閱讀版本說明中對 HTML5 支持程度的細節說明。
趙 軍 2016年8月序2 本書與業界其他相關書的不同之處在于，其各章節涉及的內容都和響應式網頁設計的技術架構有關。第 1 章是關于自適應 / 響應式網頁設計的概述，第 2 章介紹網頁新舊切版的方式和字體資源，第 3 章介紹版型尺寸的固定與彈性，第 4 章介紹 Bootstrap 的學習與使用，第 5 章介紹 Zurb’s Foundation 的學習與使用，第 6 章介紹 Yahoo’s Pure 的學習與使用。
為了能更好地理解第 2 章開始的各個范例程序，讀者需要具備HTML、CSS 和 JavaScript 的相應知識。若沒有這些基礎知識，而試圖直接通過各個章節的內容來理解各個范例程序，則勢必會事倍功半、勞心不已……希望沒有基礎的初學者，先去學習上述的基礎知識，有牢固的根基才好！
從第 4 章開始的內容著重于更為全面的響應式網頁設計模塊的應用，以指導程序設計人員更快速地創造出具有特定質感和風格的各個組件。各個組件所對應的模塊原則上都被打包在外部 CSS 文件和 JS 文件中，并通過 HTML 語句在特定網頁中顯示出各個組件的外觀。
第 4 章至第 6 章分別介紹不同廠商免費提供的組件模塊，可以通過 CSS 文件和 JS 文件的鏈接語句，使得隸屬于不同廠商的各個組件模塊同時應用于同一個網頁當中，再經由美編人員盡量使此網頁里的各個組件模塊呈現出同一質感和風格，以營造出網頁中統一的整體外觀。
本書章節內容的安排經由作者巧思而成，以便讀者能夠輕松駕馭，逐步理解本書的精髓，同時輔以易于測試和操作的范例程序，讓讀者詳細了解程序的運行原理。相對而言，第 4 章到第 6 章的一些范例程序有些煩瑣與復雜，因此以特定的程序代碼區段為單位來測試其顯示的組件外觀，是一種較為愜意的學習方式。
本書是一本程序設計參考書，讀者若覺得一大段程序代碼讓自己感到心煩且有壓力感，不妨先看懂特定程序代碼所對應的說明文字，并對自己不熟悉的英文單詞做個記號，通過在線英文字典進行查詢，以加快自己對程序代碼的深度理解。
隨著時間的推移，本書所用到的各廠商的組件模塊也會改版，因此在網絡云盤中提供了各章的范例程序文件。如果下載有問題，請電子郵件聯系，郵件主題為“響應式網頁設計實戰”。
在此恭祝各位讀者在學習上百尺竿頭更進一步，不懈努力，持之以恒，蒸蒸日上，事半功倍！
編 者
序
第1章 自適應 / 響應式網頁設計概述 1
1.1 彈性的樣式與版面 1
1.2 以移動設備為優先 1
1.3 業界流行的 RWD Framework 2
1.4 并非一定需要 RWD Framework 2
1.5 RWD實現的機制 5
1.6 瀏覽器的支持度 5
第2章 網頁的新舊切版方式和字體資源 7
2.1 程序代碼的編輯器 7
2.2 CSS搭配HTML4切版方式 7
2.2.1 開始切版前的HTML基本程序代碼結構 7
2.2.2 規劃要創建的版面 8
2.2.3 建立區塊的程序代碼 9
2.2.4 標示區塊的范圍 9
2.2.5 設置區塊尺寸 10
2.2.6 限定版面總寬度 12
2.2.7 設置區塊為浮動排列 12
2.2.8 調整各區塊的間距 14
2.2.9 版面的居中對齊 15
2.2.10 改用百分比作為顯示度量單位 16
2.3 CSS 搭配HTML5 切版方式 18
2.3.1 建立區塊的程序代碼 20
2.3.2 標示區塊范圍 20
2.3.3 設置區塊尺寸 21
2.3.4 限定版面的總寬度 23
2.3.5 設置區塊為浮動排列 24
2.3.6 調整各區塊的間距 25
2.3.7 版面的居中對齊 27
2.3.8 改用以百分比為顯示度量單位 28
2.4 CSS 搭配JavaScript 切版方式 30
2.4.1 精簡原有的程序代碼 30
2.4.2 注釋掉整段 CSS 規則語句 32
2.4.3 用 JavaScript 程序代碼實現特定版型 32
2.4.4 JavaScript 版型程序代碼的第 1 階段簡化 33
2.4.5 JavaScript 版型程序代碼的第2階段簡化 34
2.5 跨網域運用在線字體 35
2.6 使用本地的字體 38
第3章 版型尺寸的固定與彈性 42
3.1 HTML 傳統方式 42
3.2 CSS應用方式 45
3.2.1 @media語句 45
3.2.2 meta viewport語句 51
3.3 JavaScript搭建方式 52
第4章 Bootstrap 的學習與使用 56
4.1 Twitter的 Bootstrap 簡易應用方式 56
4.2 免費小圖標 58
4.3 下拉式或上拉式菜單 59
4.3.1 下拉式菜單 59
4.3.2 上拉式菜單 61
4.3.3 具有選項分隔線的下拉式菜單 61
4.3.4 具有選項分類和選項分隔線的下拉式菜單 62
4.4 一般按鈕和按鈕組 64
4.4.1 按鈕組 64
4.4.2 按鈕組的工具欄 64
4.5 帶有菜單按鈕的按鈕組 65
4.5.1 橫向按鈕組 65
4.5.2 縱向按鈕組 66
4.5.3 窗口寬度型 67
4.5.4 分離型按鈕組 68
4.6 不同尺寸的按鈕 69
4.6.1 大尺寸按鈕 69
4.6.2 標準尺寸的上拉式菜單按鈕 70
4.6.3 小尺寸按鈕 71
4.6.4 特小尺寸按鈕 72
4.7 窗體中的文本欄 73
4.7.1 標簽文字組合式 74
4.7.2 單選按鈕和多選按鈕組合式 75
4.7.3 一般按鈕組合式 76
4.7.4 下拉式菜單按鈕組合式 77
4.8 窗體中的導航欄 79
4.8.1 默認的標簽型導航欄 79
4.8.2 簡易標簽型導航欄 80
4.8.3 具有窗口寬度的堆棧式導航欄 80
4.8.4 均分窗口寬度的標簽型導航欄 80
4.8.5 動態置頂導航欄 82
4.9 瀏覽分層提示和分頁 84
4.9.1 瀏覽分層提示 84
4.9.2 分頁導航欄 85
4.9.3 前一頁和下一頁按鈕 86
4.10 文字標簽、文字徽章與文字框 87
4.10.1 文字標簽 87
4.10.2 文字徽章 87
4.10.3 文字框 88
4.11 縮略圖與圖解說明 89
4.12 警告文字框 91
4.13 進度條 92
4.14 媒體對象 95
4.14.1 一般圖片列表 95
4.14.2 多層次圖片列表 97
4.15 列表分組 100
4.15.1 默認的列表分組 100
4.15.2 加上數值徽章的列表分組 101
4.15.3 按鈕型列表分組 102
4.15.4 應用顏色樣式的列表分組 103
4.15.5 帶有內容的列表分組 104
4.16 面板 105
4.16.1 一般面板 105
4.16.2 帶有表格內容的面板 107
4.16.3 帶有列表分組內容的面板 109
4.17 自適應嵌入 110
第5章 Zurb’s Foundation的學習與使用 112
5.1 Zurb’s Foundation 簡易應用方式 112
5.2 滑入菜單 113
5.2.1 默認的滑入菜單 113
5.2.2 雙邊滑入菜單 114
5.2.3 雙邊多層次滑入菜單 118
5.3 置頂導航欄 122
5.4 工具欄與內置小圖標 125
5.4.1 跨窗口寬度的工具欄 125
5.4.2 縱向工具欄 126
5.4.3 內置圖標工具按鈕所構成的工具欄 127
5.5 側邊導航欄 128
5.6 動態置頂追蹤型導航欄 129
5.7 子導航欄 131
5.8 瀏覽分層提示 132
5.9 分頁導航欄 133
5.10 縮略圖 134
5.11 縮放式視頻 137
5.12 窗體組件 138
5.13 切換按鈕 148
5.14 滑桿 151
5.15 窗體驗證 156
5.16 按鈕 160
5.17 按鈕組 162
5.18 分割下拉式菜單按鈕組 167
5.19 整體下拉式菜單按鈕 169
5.20 字體樣式 171
5.21 行內列表 173
5.22 文字標簽 173
5.23 modal 窗格 174
5.24 警告框 180
5.25 面板框 182
5.26 動態提示框 183
5.27 頁面操作展示 185
5.28 簡易型下拉式菜單與下拉式內容框 189
5.29 價目表 192
5.30 進度條 193
5.31 表格 194
5.32 折疊式面板 195
5.33 標簽面板 203
5.34 均分版型 206
第6章 Yahoo’s Pure的學習與使用 210
6.1 Yahoo’s Pure 簡易應用方式 210
6.2 版型網格和最小容器單元 210
6.3 窗體組件 213
6.4 按鈕 222
6.5 表格 224
6.6 菜單 229
新書資訊