《響應式Web》全面介紹了響應式設計的概念以及技術技巧，由淺入深地講解了其中原理性的知識。第1部分從開發者和設計師的角度介紹了響應式設計的基本概念。第2部分從開發者與設計師協作的角度介紹了如何進行響應式設計。第3部分對編碼技巧和實戰優化進行了介紹。 響應式設計是一種新的設計理念，需要你不斷地學習、探索、實踐。它會讓你的網頁內容在不同設備上展現得更加精彩。

推薦語 我一直認為響應式不是萬能的，閱讀完本書你可以了解到響應式 Web的精妙所在，你會更加理解什么情況下可以并且應該使用它。這本書從響應式每個部分的原理討論出發，并手把手地從設計到編碼給出每一步的細節，相信每一位讀者都能從中獲益。 鬼道 /徐凱天貓技術專家 ,《跨終端 Web》作者 在移動互聯網時代，響應式 Web是每個前端工程師所必備的技能之一。這本書不僅有原理的介紹，而且還講解了各種場景下響應式頁面的實現方法，每個案例都很實用。響應式 Web的體驗是否優秀，在很大程度上取決于設計，難能可貴的是，這本書作為一本技術書籍對響應式設計也花了部分篇幅進行講解。 趙文博奇虎 360奇舞團技術經理 在設計師的眼里，移動互聯的發展從某種意義上來說就是交互媒介和屏幕適配的更新和多樣化。我們的 Web產品設計面臨著一場智能化的革命，因為用戶對產品的要求已經今非昔比：從光標到指尖；從 PC到移動設備；從橫屏到豎屏……這種種碎片化的局面一度讓設計師苦不堪言，甚至無從下手。因此，響應式設計技術的出現無論對設計師還是開發者來說都是一個福音，我們現在真正需要的就是抓住這個機會，利用這個劃時代的技術打造出更適合移動互聯用戶的 Web產品。因此在我看來，這樣一本著作的出現實在是一場“及時雨”，它告訴了我們設計師和開發者如何更好地合作，以及更充分地利用這個“利器”打造更完美的 Web產品。 趙大羽智捷課堂聯合創始人，UE/UI專家，高級講師 驚嘆一種優雅的代碼可產生多種精美絕倫的頁面。在資源有限的前提下，響應式 Web設計為我們提供了支持業務快速迭代可行性的解決方案。本書不僅詳解了響應式設計的概念，還引入了大量的實戰技巧，這使得設計師和開發者可以非常容易地應用響應式 Web設計。推薦涉及移動設計方面業務的讀者閱讀本書，讓我們一起享受響應式 Web設計帶來的樂趣吧！ 張鵬王府井百貨集團技術總監 推薦序 在互聯網大潮的背景下， PC端加速向移動端遷移： 2012年 12月底，我國網民規模達到 5.64億，互聯網普及率為 42.1%，其中手機用戶占網民總數的 74.5%。2014年，智能手機全球出貨量達 12.86億部，同比增長 28.0%。截至 2015年 1月，全球接入互聯網的移動設備總數超過 70億臺，幾乎平均全球人手一臺。作為最主要的移動終端設備，智能手機仍然保持高速增長，皮尤研究中心（Pew Research Center）近日對調研公司 comScore今年 1月份的流量數據進行了分析，評出了美國最受歡迎的 50大新聞網站。這些數據顯示，在這 50大新聞源中，大部分網站的移動流量已超越 PC流量。隨著越來越多的智能移動設備加入到互聯網中來，移動互聯網不再是獨立的小網絡了，而是成為 Internet的重要組成部分。各種移動設備的發展導致每種移動設備都希望擁有適合自身的網頁。但是 Web設計和開發幾乎無法追趕上設備與分辨率的更新，但是如果不能滿足各種設備下用戶的使用，就會流失掉用戶群，這可謂是一個巨大的挑戰。 2010年 5月，伊桑 ·馬科特（ Ethan Marcotte）在 A List Apart寫了一篇開創性的文章，題為 Responsive Web Design，文中援引了響應式建筑設計的概念— —響應式架構（ responsive architecture），并提出：物理空間應該可以根據存在于其中的人的情況進行響應。結合嵌入式機器人技術以及可拉伸材料的應用，建筑師們正在嘗試建造一種可以根據周圍人群的情況進行彎曲、伸縮和擴展的墻體結構，還可以使用運動傳感器配合氣候控制系統，調整室內的溫度及環境光。已經有公司在生產“智能玻璃”：當室內人數達到一定閾值時，這種玻璃可以自動變為不透明，確保隱私。 如果將這個思路延伸到 Web設計領域，我們就得到了一個全新的概念——響應式 Web設計。我們何必要為每個設備各自打造一套設計和開發方案？和響應式建筑相似， Web設計同樣應該做到根據不同設備環境自動響應及調整。馬科特利用三種已有的工具：流動布局、媒體查詢和彈性圖片創建了一個在不同分辨率屏幕下都能漂亮展示的網站。 響應式設計的核心正是使用百分比布局創建流動的彈性界面，使用媒體查詢來限制元素的變動范圍。響應式 Web設計的理念是：頁面的設計與開發應根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。無論用戶正在使用筆記本還是 iPad，頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本的功能等，以適應不同設備。換句話說，頁面應該有能力自動響應用戶的設備環境，響應式網頁設計就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本。這樣，我們就不必為不斷到來的新設備做專門的版本設計和開發了。我們可以將不同聯網設備上眾多的體驗，當作是同一網站體驗的不同側面來對待，而不要為每種設備進行單獨剪裁而使得設計彼此斷開，這才是我們前進的方向。 隨著智能終端的普及，響應式網頁設計被許多網站廣泛使用，而且其優勢和趨勢均已經被普遍認可。 .開發、運營成本低：相同的頁面針對分辨率的不同、設備環境的不同進行了一些不同的響應式設計，所以在開發維護和運營上，相對同時開發多個版本的成本會降低。 .兼容性好：移動設備的尺寸參差不齊，版本定制通常只適用于固定規格的設備，如果新的設備分辨率變化較大，通常不能兼容，若要開發新的版本，則需要時間，但是響應式設計可以提前預防這個問題。 .方便改動：響應式設計是針對頁面的，可以只對必要的頁面進行改動，其他頁面不受影響。 在 Matthew Carver的著作 The Responsive Web一書中，作者以一種易于接受的方式，為讀者介紹了現代化的 Web設計，以及響應式設計的重要性。本書共分為 3個部分。第 1部分簡明扼要地介紹了響應式設計是什么、它為什么會出現，以及現代化 Web瀏覽器中的哪些特性促成了響應式 Web設計的出現。這部分內容也談到了“移動優先”這一概念，使用這種概念進行網站設計時，首先按照某個移動設備的斷點進行設計，隨后再轉而設計它的桌面版本。第 2部分開始介紹如何設計響應式 Web。Carver首先講解了一些如何為客戶展示設計思想的技巧，而不是直接跳到代碼的編寫部分。他以導航的設計作為入口，介紹了設計模式的使用，以及如何創建響應式頁面的思想。接下來的部分涵蓋了如何進行實際的響應式設計的某些基本原理，以及用以展現信息的某些現代技術，例如 Web排版。本書的最后一部分介紹了一些高級技術，對于因各種瀏覽器的不同行為所造成的問題提供了有效的解決方案。在本書的結尾部分，作者對于設計的測試，以及如何進行性能優化方面提供了一些實際建議。 響應式設計在 2012年被提的比較多，但是響應式設計仍然在不斷變化，不斷創新，各種 Web的響應式設計也獲得了越來越多的關注。比如，新的設備不斷被創造出來（iPad Mini、iPad Pro），另外 iOS 9新增的 Split View也讓頁面的展示尺寸有了更多的可能性，這讓以前的設計想法土崩瓦解。“讓人們忘記設備尺寸”的理念將更快地驅動響應式設計，響應式設計歸根結底不是一種技術，而是一種設計思維方式，即刻起，打開本書開始擁抱響應式 Web的設計開發吧。 郭凱美團網前端負責人 譯者序 邁克爾·塞勒（Michael Saylor）所著的《移動浪潮》一書中有這樣一段話：“一項真正顛覆性的技術出現了，而且它將徹底改變商業、社會或經濟。它在多個層面產生非線性的影響，而且其影響巨大，以至于很難在塵埃落定之前確定其影響范圍。 ” 以 iPhone為代表的移動設備便是具有代表性的顛覆性產品，它帶來了令人驚嘆的用戶體驗。早在 2009年的時候，我所負責的項目便涉及了移動 Web開發。雖然那時只是一個簡單的 OA審批頁面，但為了能在 PC和手機上顯示，我們使用了獨立的兩套模板。隨著業務的不斷深入，類似的需求越來越多。這樣需要維護的“雙胞胎”頁面也越來越多，制作及維護代價越來越大。直到我拜讀到伊桑·馬科特（ Ethan Marcotte）關于流動布局介紹的文章后，方才茅塞頓開。根據其設計思想加上少量的 JavaScript代碼實現了可以兼容 PC和移動端的頁面，當然現在看來，那時的頁面和技術還略顯粗糙，但是已經令我興奮不已。 轉眼間到了 2010年 5月，伊桑 ·馬科特在 A List Apart上發表了一篇題為“響應式 Web設計”（Responsive Web Design）的文章，他利用三種工具創建了一個在不同分辨率屏幕下都能完美展示的網頁。它們分別是：流式布局、媒體查詢和彈性圖片。這種設計思想將我們帶入一個新的時代，讓我們先來認識一下響應式 Web設計的“三劍客”。 .流式布局 與傳統的固定布局以像素單位為主不同，流式布局以百分比單位為主，這樣便可以設計出更具靈活性的布局方式。如： Bootstrap移動設備優先的流式柵格系統。 .媒體查詢 媒體查詢是與設備相關的技術，它可以讓你查詢到設備的各種屬性值，如：設備類型、分辨率、屏幕物理尺寸及色彩等。從而決定應用不同的樣式，給出求同存異的布局 /樣式方案。 .彈性圖片 彈性的含義可表述為，圖片可以根據當前的視窗自適應展示，圖片的視覺表現力非常突出，因此彈性圖片的布局與適配非常重要，這里所述的圖片包含了以圖片為代表的圖形或者媒體元素：圖片、圖標、圖表及視頻等。 基于上述工具進行響應式 Web設計，可以使用以下兩種設計模式。 .設備優先 斷點是為了適應各種設備的寬度值，技術上是基于媒體查詢來判定當前設備的寬度，從而可設計多套樣式來滿足不同設備的視覺展示需求。因此設計模式是基于設備的。 .移動優先 移動優先允許你優先考慮內容并更早地關注你的網站的最重要部分。某些時候，移動優先也許與“內容優先”同義，從核心上說，移動網站策略就是內容策略。由于大小、功率和帶寬等限制，移動 Web設計 90%是內容性設計， 10%是裝飾性設計。所以我們要根據內容的可讀性、易讀性來確定斷點，從而無視設備。因此設計模式是基于內容的。 本書簡介 本書全面介紹了響應式設計的概念以及技術技巧，由淺入深地講解了其中原理性的知識。共分三個部分。 第 1部分 從開發者和設計師的角度介紹了響應式設計的基本概念，讓你能快速地對響應式設計有基本認知和了解，涵蓋了媒體查詢、斷點、移動優先、字體等知識。為開始構建響應式網站提供了必要的背景知識。 第 2部分 從開發者與設計師協作的角度介紹了如何進行響應式設計，讓你了解在響應式設計中團隊應該如何進行協作來完成一項成果。同時用了一個示例來闡述這個過程，涵蓋了樣式指南、設計模式、布局、排版、網格等知識。最后對面對多種終端設備如何組織內容模塊進行了深入探討。 第 3部分 這部分對編碼技巧和實戰優化進行了介紹，涵蓋了 SVG、圖標字體、測試、瀏覽器兼容增強、性能等知識，這會讓你在實戰中得到更多的技術支持和應用。 響應式設計是一種新的設計理念，需要你不斷學習、探索、實踐，它會讓你的內容在不同設備上展現得更加精彩。 適用讀者 本書適合任何對 Web設計感興趣的讀者進行閱讀，特別適合前端工程師、設計師、產品經理、架構師、項目經理等。示例中會涉及一些 HTML和 CSS代碼，理解這些代碼會極大幫助你深入了解響應式 Web設計開發中的技巧。 序言 2010年 5月的時候，我在 A List Apart網絡雜志上讀了一篇文章。如果你曾訂閱過這本雜志，可能知道我談論的這篇文章。你可能讀過它，或聽過關于它的一些引文、評論、討論與辯論。現在 5年過去了，這篇文章奠定了自 20世紀 90年代 Web標準運動以來互聯網上最大的運動之一的基礎。 當 Ethan Marcotte的文章 Responsive Web Design1出版的時候，我對 Web還知之甚少，那時我正在網頁制作工作室做我的第一份工作。我的第一部 iPhone手機已經買了有幾個月的時間了，我正進行移動網站的編程。我的項目中包含了適配移動設備的樣式腳本，像那時的許多開發者一樣，我正苦苦地尋找一個好的方案進行移動 Web開發。 iPhone改變著一切，很快它便成為我瀏覽網頁最喜歡用的工具。但網站在 iPhone上的界面很不友好。Ethan的文章像救世主一樣給我們帶來了啟示，它為開發中遇到的這個棘手的問題提供了一種清晰的解決方案。自 2010年 6月起，我開始在工作中使用媒體查詢（Media Query）。響應式 Web設計給我的項目添加了一些新鮮的、令人興奮的元素，也徹底解決了我遇到的移動 Web設計的問題。 除了技術上的挑戰，響應式 Web設計也給我介紹了一種新的工作方式。那就是，響應式設計需要視覺設計師和前端工程師齊心協作，這正是令我興奮的一點。說到網頁中的設計與開發這兩方面，我一直覺得它們的融合是創造令人不可思議的數字體驗的關鍵所在。這成為令我著迷的響應式設計的一部分：設計和編碼的創造性成為前端開發的前期工作。 我有這樣一個習慣：每當發現一些有趣的事情，總想與人分享。如果你在我的公司待上幾分鐘，可能就會聽見我在一些無聊的話題上侃侃而談，如漫畫書、棒球、威士忌和一些自以為是的漫談。響應式 Web設計沒有什么不同，我告訴每個人我有在 Web會議上討論它的權利。 這本書依然沿用了我的慣用風格。我對正走向成熟的 Web邁出的巨大一步表現出溢于言表的熱情。我相信互聯網是人類歷史上最重要的發明之一。人與人之間的信息分享對創造與創新非常重要。互聯網會成為人類歷史上最好的分享想法與信息的媒介。 我希望這本書能夠幫你對響應式 Web設計有一個新的認識。我的目標是讓這本書鼓勵讀者開始嘗試響應式設計，更重要的是給讀者提供工具與語言，幫助設計師與開發者實現協作。這本書能使你了解如何創建一個全新的與設備無關的 Web。 致謝 這本書的完成離不開卓越團隊的支持，感謝這些人讓我做了這件我從來沒想過自己能做到的事。我想借此機會由衷地感謝這些人。首先，我想要感謝組織了 HTML5.tx會議的 Brandon Satrom和他的團隊。如果沒有那次在公共平臺上分享我的觀點的機會，這本書就不會誕生。感謝 John Tornow和 Randy Bradshaw 兩位導師，他們鼓勵我在職業生涯早期樹立雄心壯志并給我指引了方向。感謝 Chris Williams、 Brooks Oakley、Justin Tabor、James Henningson、Brian、Linder和 Cory Hudson給予我的支持、鼓勵、建議和智慧。 寫這本書并不那么容易，特別對于 Manning出版社的合作者們，與 Manning的團隊一起工作充滿了歡樂。在寫書期間，我生活中的一切都像是冒險。 Manning的團隊是這本書能夠完成的基石。首先，我必須感謝策劃編輯 Cynthia Kane的指引、耐心、指導和建議。 Cynthia給予我一次又一次的超出職責范圍的幫助，使我的工作不再乏味。我不會忘記她付出的那些不可想象的辛勤勞動。感謝 Roberto Alarcon在我寫作期間所做出的貢獻， Andy Carroll在審稿時發現的低級語法和排版錯誤。感謝作為專業校對員 Valentin Crettaz的縝密工作，他給了我很多無價的建議和評論。感謝 Kevin Sullivan使這本書的圖片有最佳視覺效果。 特別感謝以下在寫作過程中閱讀了原稿的人，是他們的反饋使這本書變得更好。他們是： Adam Murray、Beno.t Benedetti、Brian Bush、Bruno Sonnino、Christopher Weiss、Daniele Midi、 David Landau、Dr. Martin Beer、Gary Kirrene、 Gregor Zurowski、James Bisiar、Jeff Smith、Joel Kotarski、John D. Lewis、Mike Donahue、 Nikolaos Kaintantzis、Sebastian Felling和 Sergio Arbeo。 最后，我想感謝我的妻子 Alex。在過去的 6年里，她是我生命的支柱、力量的源泉，沒有她的愛與支持就不會有今天的我。當我還是一個卑微的自由 Web設計師，過著入不敷出的日子時，她一直鼓勵著我；是她給了我信心，讓我去從事第一份正式的 Web開發的工作；是她在困難時刻不離不棄；是她不厭其煩地聽我講述 Web設計，幫我鞏固思維，助我完成這本書。她甚至還幫助我編輯我最初的關于響應式 Web設計的博客文章。認識她使我成為這個世界上最幸運的人。Alex，你是我一生的摯愛。 關于本書 響應式 Web設計是一項能夠自適應手機、平板電腦和 PC等設備中的多種瀏覽器的網頁技術。它通過 CSS3 的媒體查詢（ Media Query）得以實現，開發者借助媒體查詢只需一套設計就可以在眾多的設備上展示不同的頁面效果。雖然這項技術表面看來很簡單，但是實際運用起來會遇到不少挑戰。 本書中有許多響應式 Web設計實際運用的案例，開發者可以通過它們提升自己的開發技巧，設計師也可以從中學到運用這項技術進行設計的技能。本書的目標不是簡單地羅列出使用響應式 Web設計所面臨的挑戰，而是對在運用這項技術時團隊所遇到的設計和協作問題進行詳盡的描述。 本書不是簡單的蹣跚學步的教程，它不僅能夠幫助設計師和開發者更好地了解進行響應式 Web設計的實用組件背后的原理，還給出了許多相關提示。每一章結尾既有本章總結，也有對內部機制的思考或設計師與開發者應如何開展溝通協作的小話題。希望這本書能夠成為你的團隊的讀物，激發你對響應式 Web設計的想象力，并加深你對響應式 Web設計的理解。同時希望這本書能成為你的團隊進行響應式 Web設計實踐的指引者。 本書結構 本書分 3部分，共 9章，另外還有兩個附錄，但其中一個附錄只能在網上進行查閱。 .第 1章簡述響應式 Web的核心概念、發展歷史及團隊如何開展相關工作。 .第 2章著重描述如何針對手機屏幕進行設計及在小屏幕上遇到的設計問題。 .第 3章介紹了樣式板（ Style Tile），類似情緒板（設計師常用的方法），不用提供布局就可以交付成果的設計方式。 .第 4章給出響應式設計模式的概要。包括設計模式的概念和使用響應式布局所遇到的問題的解決途徑。 .第 5章介紹了響應式布局，著重描述網格系統和屏幕大小發生改變時改變頁面布局的方法。 .第 6章討論了響應式內容所面臨的難題及使內容隨屏幕大小正確展示的方法。 .第 7章介紹了一些強大的 CSS3技術，著重闡述給響應式頁面添加視覺圖形和樣式的方法。本章不僅包括響應式圖片和視頻，還包括如何通過 CSS對網頁進行縮放的技巧和提示。 .第 8章介紹了一個解決瀏覽器兼容性和移動資源優化的工具— —Modernizr。讀者將會學習到如何使用它來提升網頁性能和解決跨瀏覽器及跨設備的兼容性問題。 .第 9章給出進行響應式測試時會出現的提示及通過網絡審查工具優化網頁的方法。 .附錄 A附在本書后面，而附錄 B只能通過下面這個網址獲取， www.manning.com/ The ResponsiveWeb。 本書面向的讀者 本書適合前端研發的從業者。它的目標是解決設計師和開發者的協作問題，并能夠激發和增強讀者對互聯網未來的好奇心和信心。任何從事互聯網相關工作的讀者都能從中獲益，包括設計師、開發者，甚至管理者。 如果你對 HTML和 CSS有基本了解，將會對理解本書的一些章節有所幫助。本書假設讀者對互聯網設計和開發的核心概念有基本的了解。由于大部分內容是非技術性的策略和建議，本書并不要求讀者必須為程序員，但是熟悉 HTML將會獲得更好的閱讀體驗。 如果你正在創建、設計響應式網頁，或者需要與做這樣工作的團隊合作，那么這本書就是為你量身定做的，它涵蓋了大量關于響應式 Web開發的背景知識。 代碼約定和資源下載 本書所有的代碼都會使用等寬字體與普通文本加以區分： fixed-width font like this，代碼注釋中將會羅列一些醒目的重要概念。 本書引用了大量闡述設計和開發原則的代碼，所有 HTML、CSS和 JavaScript的源代碼都可以通過出版社的網站下載， manning.com/TheResponsiveWeb。絕大部分 JavaScript源代碼都會引用 jQuery，它和少部分的 JavaScript庫一樣保存在互聯網服務器上，需要你聯網獲取。除去這些，其他代碼都是本地可運行的。本書有對相關源代碼文件目錄的介紹。本書絕大部分代碼都十分簡潔，并且相對獨立。 在線交流 購買了本書的讀者能夠免費進入由 Manning出版社提供的互聯網論壇，讀者可以在那里對此書發表評論、提出問題并獲得作者和其他讀者的幫助。論壇網址為 www.manning.com/TheResponsiveWeb。頁面上有引導你注冊的信息，以及論壇提供的幫助和論壇規則的介紹。 Manning出版社承諾提供一個讀者之間及讀者與作者之間進行有效溝通的場所，但是并不能保證那些自愿并且免費為社區做貢獻的作者也能夠參與其中，建議讀者提出能夠讓作者感興趣的問題。只要圖書還在銷售，讀者隨時都可以進入該論壇并了解相關討論。 關于作者 Matthew Carver 是一名技術專家、演講者、作者和提倡設計和技術相融合的顧問。他是響應式 Web設計早期的擁護者，曾參與過 American Airlines、Dallas Momoing News、Chobani、Home Depot和 Google等公司的給生活帶來革新的項目。 Matthew最初在德克薩斯州達拉斯市的 Richards Group工作，現在與他的伙伴一同在紐約市成立了一家數字公司，他們會把一些想法發布到線上。他的個人主頁為 Matthew-Carver.com，Twitter賬號是 @matthew_carver。