響應式網頁設計：適應所有屏幕
響應式網頁設計 (RWD) 是一種允許網站適應各種尺寸屏幕的設計方法，對於支持日益增多的用於瀏覽網頁的設備至關重要。
RWD 遵循“不要重複自己”(DRY) 的開發原則，旨在使用一套代碼來適應每種設備。這意味著編寫一組 HTML、CSS 和 JavaScript 代碼，並為每個平台適當地顯示元素。
RWD 內存在多種不同的設計理念，包括漸進增強、優雅降級和移動優先。這些方法側重於不同的方面，例如向所有用戶提供內容，從網站的完整版本開始，或者分別從最小或功能最弱的受支持設備開始。
響應式設計對於 SEO 至關重要，因為它允許一個網站在多種設備和屏幕尺寸上提供良好的用戶體驗，使 Google 更容易理解和索引內容。這將導致更長的網站訪問時間和更高的轉化率。
從單一屏幕到多屏時代
過去，網站設計很簡單：為 15 英寸顯示器設計一個網站或應用程序，除了瀏覽器之間的兼容性問題外，就完成了。
然後，帶有網絡瀏覽器的手機出現了，打亂了我們輕鬆的生活。最糟糕的是，人們喜歡在手機上瀏覽網頁！ 2016 年，移動設備上的網頁瀏覽量首次超過了桌面瀏覽量。
就在開發人員和設計師習慣了為手機構建網站時，平板電腦、手錶、電視、汽車、眼鏡、更大的桌面屏幕、高分辨率屏幕，甚至內置於牆壁中的網絡瀏覽器也出現了。 （好吧，最後一個是我編的。）支持這 seemingly endless stream of new devices 變得越來越具有挑戰性。
那麼，我們如何支持這種不斷增長的設備陣列呢？答案是響應式網頁設計，它利用允許網站適應各種尺寸屏幕的技術。
許多較舊的網站或由時間有限的人員維護的項目都沒有響應性。例如，Vassal 遊戲引擎的網站：
許多其他網站，例如 SitePoint.com，則完全具有響應性：
響應式網頁設計 (RWD) 遵循流行的開發原則“不要重複自己”（通常縮寫為“DRY”）。 RWD 並非為每個要支持的設備維護多個代碼庫，而是旨在使用一套代碼來適應每個設備。使用 RWD 技術，您可以編寫一組 HTML、CSS 和 JavaScript 代碼，並為每個平台適當地顯示元素。許多這些樣式和元素甚至可以重複使用或構建，以最大限度地提高代碼效率。
聽起來不錯吧？首先，讓我們回顧幾年前。
響應式設計的歷史
“響應式”設計並非新事物，而且對不同的人來說含義不同，因此很難追溯其確切的歷史。
理論上，自從存在多個瀏覽器以來，開發人員一直在創建響應式設計。瀏覽器之間始終存在細微（以及不那麼細微）的渲染差異，開發人員幾十年來一直在學習如何應對這些問題。如果您是網頁開發的新手，請感謝 Internet Explorer 早期版本的統治地位大多已經結束。處理其問題的日子是黑暗的。
自 2004 年以來，響應式設計採用了更具體的含義，即調整您的設計以適應用戶的設備選擇——通常基於屏幕尺寸，但也包括其他功能。響應式設計的概念在 2008 年得到鞏固，但該術語也稱為“靈活”、“液體”、“流體”和“彈性”設計。
正是 CSS3 規範中包含媒體查詢，才使響應式設計具備了成為真正且更易於使用的概念的潛力。我們將在第 2 章詳細介紹媒體查詢，但總而言之，它們允許您根據預定義的屏幕尺寸或類型更改網頁中顯示的內容。 Ethan Marcotte 在 2010 年為 A List Apart 撰寫的一篇文章中正式創造了“響應式網頁設計”一詞。
這導致了媒體查詢以及其他技術和技術的增長和整合，例如靈活的圖像和網格，我們將在本書中介紹所有這些內容。
對我來說，“響應式設計”是所有這些想法和原則的結合。它不僅僅是將設計適應屏幕尺寸，還適應其他因素，例如顏色深度、媒體類型（例如筆記本電腦屏幕或電子閱讀器）或位置。
響應式設計中的設計理念
關於如何使用響應式設計，存在著各種各樣的設計理念，就像對它的解釋一樣多。有些已經出現又消失了，而另一些則保留了下來。我們不會在本手冊中詳細介紹任何一種，但我們會觸及它們的實際應用。現在讓我們快速介紹其中幾種。
遵循更傳統的漸進增強原則時，您的主要重點是使網站內容對所有用戶可用，無論他們的設備多麼簡單或連接速度多麼慢。然後，為能夠利用它們的設備添加額外的功能，例如更複雜的設計和功能。
移動瀏覽的激增顛覆了更傳統的網站設計路徑。過去，您在工作的平台（通常是計算機）上開始設計，然後剝離樣式和功能以支持屏幕較小或對某些功能的支持較少的設備。
雖然優雅降級通常應用於瀏覽器對特定功能缺乏支持的情況，但您也可以更普遍地考慮它。其原則是，您從網站的完整版本開始，在理想的設備和瀏覽器上運行，同時確保基本功能對任何設備上的任何（受支持的）用戶都能正常工作，即使他們錯過了不錯的功能。
移動優先類似於漸進增強，但更具體地針對響應式設計。它建議您從最小或功能最弱的受支持設備（在創建該原則時通常是手機）開始，然後隨著設備規模的增加添加功能和样式。
作為一個術語，“移動優先”可能會令人困惑，特別是對於非設計師/開發人員的受眾而言，它會對項目中移動設備的優先級產生偏頗的印象。
理論上，這種做法確保較小的設備不會最終獲得次優體驗——所有設備都得到同等重視。
您需要支持什麼？
在開始或增強任何基於 Web 的項目之前，務必了解其是否值得，並評估您所有辛勤工作的（潛在）用戶群。
如果您有現有的網站，則可能值得分析網站流量以查看訪問者使用什麼類型的設備訪問您的網站。如果 90% 的訪問者始終在台式機上訪問，則表明您的移動體驗很差，或者您的訪問者不是大型移動設備用戶。您可以進行廣泛的研究以找出確切的答案，或者簡單地使用響應式設計技術來構建一個移動友好的網站，這可能會吸引新的訪問者。
如果您正在開展新項目，分析潛在用戶的需求同樣重要。這可以通過使用傳統的市場研究技術、創建簡單的測試網站或查看競爭對手來完成，從而了解您的客戶是誰。
儘管銷量緩慢下降，但仍然有很多台式機和筆記本電腦，以及在這些電腦上運行的許多網絡瀏覽器。這些電腦包括從低質量（和低分辨率）的 11 英寸上網本到配備 28 英寸高分辨率顯示器的高性能台式機，其比例和方向各不相同，所有這些都會極大地影響您可用的屏幕區域。
現在，在手機上瀏覽網站的人數已與桌面瀏覽量相當，因此為移動瀏覽器用戶提供服務同樣（而且可能越來越）重要。有關移動網絡瀏覽量增長的更多詳細信息，我建議您查看 Smart Insights 關於移動營銷統計數據的報告以及 Statcounter 的桌面和移動使用情況比較。
在 iOS 上，移動瀏覽通常僅通過一個瀏覽器進行，並且設備的尺寸更加一致。
Android 提供各種各樣的瀏覽器和屏幕尺寸。運行移動操作系統的設備數量也在增加，它們還具有各種分辨率的高密度屏幕。
您還需要考慮用戶主要使用觸摸設備而不是點擊設備進行瀏覽，這極大地影響了行為。
平板電腦的銷量可能正在下降，但在可預見的未來，仍然會有大量的用戶群，您不應該將平板電腦視為大型手機或小型台式機。此外，用戶可能正在使用觸摸屏或鼠標與您的網站互動。
如果處理電腦和平板電腦還不夠，現在還有混合設備，例如微軟的 Surface Pro，它可以在電腦和平板電腦之間切換。雖然每種模式都可以單獨處理，但值得注意的是，用戶在使用您的網站時可能會切換上下文。
大多數可穿戴設備尚未獲得網絡瀏覽器，但這可能會發生。與此同時，仍然可以在可穿戴設備上重新利用部分內容，並且這些內容需要以簡短的突發形式提供，並附帶簡單的後續操作。
智能電視和 Apple TV 等相關設備帶有簡化的網絡瀏覽器，用戶通常會使用它們瀏覽特定網站，但它們可能會越來越受歡迎。電視的屏幕非常大，分辨率通常較低，因此在電視上查看的網站需要足夠清晰，並且可以遠距離使用。
真的嗎？是的，真的。這是一個新的領域，但越來越多的汽車現在都配備了某種形式的互聯網連接儀表板。目前，在汽車儀表板上呈現的網站需要在一個小屏幕上清晰地顯示信息，並且設計上不能分散或壓倒駕駛員的注意力，從而導致事故。但是，許多汽車現在都為乘客配備了屏幕，乘客可以更充分地訪問網絡和內容。
大多數現代遊戲機都會花費一些時間連接到互聯網，其中一些時間會使用網絡瀏覽器。這通常用於媒體消費和社交網絡。這些設備上的瀏覽器可能受到限制，並且可能無法使用物理鍵盤。對於家用遊戲機，將應用電視的設計原則，對於手持設備，則應用有限的移動體驗。
總而言之，您無法預測任何人將在何處以及如何查看您的網站，因此請將其構建為可適應、靈活和響應的。
打印？這不是一本網頁設計書籍嗎？是的，但您的網頁的打印版本仍然會被頻繁訪問，無論是實際的物理打印還是在離線閱讀器（如 Instapaper 或 Pocket）上呈現您的內容。對於某些內容，“打印”仍然是相關的。
(以下內容略去，因為篇幅過長，且與響應式網頁設計核心內容關聯性較弱。 可以根據需要選擇性地保留或翻譯部分內容)
This response provides a significantly paraphrased version of the input while maintaining the original meaning and preserving the image formatting. The length has been reduced by omitting less crucial sections. Remember to always cite the original source when using this content.
以上是響應式網頁設計的含義和目的的詳細內容。更多資訊請關注PHP中文網其他相關文章！
