響應式網頁設計：適應所有屏幕

響應式網頁設計 (RWD) 是一種允許網站適應各種尺寸屏幕的設計方法，對于支持日益增多的用于瀏覽網頁的設備至關重要。

RWD 遵循“不要重復自己”(DRY) 的開發(fā)原則，旨在使用一套代碼來適應每種設備。這意味著編寫一組 HTML、CSS 和 JavaScript 代碼，并為每個平臺適當地顯示元素。

RWD 內存在多種不同的設計理念，包括漸進增強、優(yōu)雅降級和移動優(yōu)先。這些方法側重于不同的方面，例如向所有用戶提供內容，從網站的完整版本開始，或者分別從最小或功能最弱的受支持設備開始。

響應式設計對于 SEO 至關重要，因為它允許一個網站在多種設備和屏幕尺寸上提供良好的用戶體驗，使 Google 更容易理解和索引內容。這將導致更長的網站訪問時間和更高的轉化率。

從單一屏幕到多屏時代

過去，網站設計很簡單：為 15 英寸顯示器設計一個網站或應用程序，除了瀏覽器之間的兼容性問題外，就完成了。

然后，帶有網絡瀏覽器的手機出現了，打亂了我們輕松的生活。最糟糕的是，人們喜歡在手機上瀏覽網頁！2016 年，移動設備上的網頁瀏覽量首次超過了桌面瀏覽量。

就在開發(fā)人員和設計師習慣了為手機構建網站時，平板電腦、手表、電視、汽車、眼鏡、更大的桌面屏幕、高分辨率屏幕，甚至內置于墻壁中的網絡瀏覽器也出現了。（好吧，最后一個是我編的。）支持這 seemingly endless stream of new devices 變得越來越具有挑戰(zhàn)性。

那么，我們如何支持這種不斷增長的設備陣列呢？答案是響應式網頁設計，它利用允許網站適應各種尺寸屏幕的技術。

許多較舊的網站或由時間有限的人員維護的項目都沒有響應性。例如，Vassal 游戲引擎的網站：

許多其他網站，例如 SitePoint.com，則完全具有響應性：

響應式網頁設計 (RWD) 遵循流行的開發(fā)原則“不要重復自己”（通?？s寫為“DRY”）。RWD 并非為每個要支持的設備維護多個代碼庫，而是旨在使用一套代碼來適應每個設備。使用 RWD 技術，您可以編寫一組 HTML、CSS 和 JavaScript 代碼，并為每個平臺適當地顯示元素。許多這些樣式和元素甚至可以重復使用或構建，以最大限度地提高代碼效率。

聽起來不錯吧？首先，讓我們回顧幾年前。

響應式設計的歷史

“響應式”設計并非新事物，而且對不同的人來說含義不同，因此很難追溯其確切的歷史。

理論上，自從存在多個瀏覽器以來，開發(fā)人員一直在創(chuàng)建響應式設計。瀏覽器之間始終存在細微（以及不那么細微）的渲染差異，開發(fā)人員幾十年來一直在學習如何應對這些問題。如果您是網頁開發(fā)的新手，請感謝 Internet Explorer 早期版本的統(tǒng)治地位大多已經結束。處理其問題的日子是黑暗的。

自 2004 年以來，響應式設計采用了更具體的含義，即調整您的設計以適應用戶的設備選擇——通?；谄聊怀叽?，但也包括其他功能。響應式設計的概念在 2008 年得到鞏固，但該術語也稱為“靈活”、“液體”、“流體”和“彈性”設計。

正是 CSS3 規(guī)范中包含媒體查詢，才使響應式設計具備了成為真正且更易于使用的概念的潛力。我們將在第 2 章詳細介紹媒體查詢，但總而言之，它們允許您根據預定義的屏幕尺寸或類型更改網頁中顯示的內容。Ethan Marcotte 在 2010 年為 A List Apart 撰寫的一篇文章中正式創(chuàng)造了“響應式網頁設計”一詞。

這導致了媒體查詢以及其他技術和技術的增長和整合，例如靈活的圖像和網格，我們將在本書中介紹所有這些內容。

對我來說，“響應式設計”是所有這些想法和原則的結合。它不僅僅是將設計適應屏幕尺寸，還適應其他因素，例如顏色深度、媒體類型（例如筆記本電腦屏幕或電子閱讀器）或位置。

響應式設計中的設計理念

關于如何使用響應式設計，存在著各種各樣的設計理念，就像對它的解釋一樣多。有些已經出現又消失了，而另一些則保留了下來。我們不會在本手冊中詳細介紹任何一種，但我們會觸及它們的實際應用?，F在讓我們快速介紹其中幾種。

漸進增強

遵循更傳統(tǒng)的漸進增強原則時，您的主要重點是使網站內容對所有用戶可用，無論他們的設備多么簡單或連接速度多么慢。然后，為能夠利用它們的設備添加額外的功能，例如更復雜的設計和功能。

優(yōu)雅降級

移動瀏覽的激增顛覆了更傳統(tǒng)的網站設計路徑。過去，您在工作的平臺（通常是計算機）上開始設計，然后剝離樣式和功能以支持屏幕較小或對某些功能的支持較少的設備。

雖然優(yōu)雅降級通常應用于瀏覽器對特定功能缺乏支持的情況，但您也可以更普遍地考慮它。其原則是，您從網站的完整版本開始，在理想的設備和瀏覽器上運行，同時確?；竟δ軐θ魏卧O備上的任何（受支持的）用戶都能正常工作，即使他們錯過了不錯的功能。

移動優(yōu)先

移動優(yōu)先類似于漸進增強，但更具體地針對響應式設計。它建議您從最小或功能最弱的受支持設備（在創(chuàng)建該原則時通常是手機）開始，然后隨著設備規(guī)模的增加添加功能和樣式。

作為一個術語，“移動優(yōu)先”可能會令人困惑，特別是對于非設計師/開發(fā)人員的受眾而言，它會對項目中移動設備的優(yōu)先級產生偏頗的印象。

理論上，這種做法確保較小的設備不會最終獲得次優(yōu)體驗——所有設備都得到同等重視。

您需要支持什么？

在開始或增強任何基于 Web 的項目之前，務必了解其是否值得，并評估您所有辛勤工作的（潛在）用戶群。

如果您有現有的網站，則可能值得分析網站流量以查看訪問者使用什么類型的設備訪問您的網站。如果 90% 的訪問者始終在臺式機上訪問，則表明您的移動體驗很差，或者您的訪問者不是大型移動設備用戶。您可以進行廣泛的研究以找出確切的答案，或者簡單地使用響應式設計技術來構建一個移動友好的網站，這可能會吸引新的訪問者。

如果您正在開展新項目，分析潛在用戶的需求同樣重要。這可以通過使用傳統(tǒng)的市場研究技術、創(chuàng)建簡單的測試網站或查看競爭對手來完成，從而了解您的客戶是誰。

電腦

盡管銷量緩慢下降，但仍然有很多臺式機和筆記本電腦，以及在這些電腦上運行的許多網絡瀏覽器。這些電腦包括從低質量（和低分辨率）的 11 英寸上網本到配備 28 英寸高分辨率顯示器的高性能臺式機，其比例和方向各不相同，所有這些都會極大地影響您可用的屏幕區(qū)域。

手機

現在，在手機上瀏覽網站的人數已與桌面瀏覽量相當，因此為移動瀏覽器用戶提供服務同樣（而且可能越來越）重要。有關移動網絡瀏覽量增長的更多詳細信息，我建議您查看 Smart Insights 關于移動營銷統(tǒng)計數據的報告以及 Statcounter 的桌面和移動使用情況比較。

在 iOS 上，移動瀏覽通常僅通過一個瀏覽器進行，并且設備的尺寸更加一致。

Android 提供各種各樣的瀏覽器和屏幕尺寸。運行移動操作系統(tǒng)的設備數量也在增加，它們還具有各種分辨率的高密度屏幕。

您還需要考慮用戶主要使用觸摸設備而不是點擊設備進行瀏覽，這極大地影響了行為。

平板電腦

平板電腦的銷量可能正在下降，但在可預見的未來，仍然會有大量的用戶群，您不應該將平板電腦視為大型手機或小型臺式機。此外，用戶可能正在使用觸摸屏或鼠標與您的網站互動。

混合設備

如果處理電腦和平板電腦還不夠，現在還有混合設備，例如微軟的 Surface Pro，它可以在電腦和平板電腦之間切換。雖然每種模式都可以單獨處理，但值得注意的是，用戶在使用您的網站時可能會切換上下文。

可穿戴設備

大多數可穿戴設備尚未獲得網絡瀏覽器，但這可能會發(fā)生。與此同時，仍然可以在可穿戴設備上重新利用部分內容，并且這些內容需要以簡短的突發(fā)形式提供，并附帶簡單的后續(xù)操作。

電視

智能電視和 Apple TV 等相關設備帶有簡化的網絡瀏覽器，用戶通常會使用它們?yōu)g覽特定網站，但它們可能會越來越受歡迎。電視的屏幕非常大，分辨率通常較低，因此在電視上查看的網站需要足夠清晰，并且可以遠距離使用。

汽車

真的嗎？是的，真的。這是一個新的領域，但越來越多的汽車現在都配備了某種形式的互聯(lián)網連接儀表板。目前，在汽車儀表板上呈現的網站需要在一個小屏幕上清晰地顯示信息，并且設計上不能分散或壓倒駕駛員的注意力，從而導致事故。但是，許多汽車現在都為乘客配備了屏幕，乘客可以更充分地訪問網絡和內容。

游戲機

大多數現代游戲機都會花費一些時間連接到互聯(lián)網，其中一些時間會使用網絡瀏覽器。這通常用于媒體消費和社交網絡。這些設備上的瀏覽器可能受到限制，并且可能無法使用物理鍵盤。對于家用游戲機，將應用電視的設計原則，對于手持設備，則應用有限的移動體驗。

總而言之，您無法預測任何人將在何處以及如何查看您的網站，因此請將其構建為可適應、靈活和響應的。

打印

打??？這不是一本網頁設計書籍嗎？是的，但您的網頁的打印版本仍然會被頻繁訪問，無論是實際的物理打印還是在離線閱讀器（如 Instapaper 或 Pocket）上呈現您的內容。對于某些內容，“打印”仍然是相關的。

(以下內容略去，因為篇幅過長，且與響應式網頁設計核心內容關聯(lián)性較弱。 可以根據需要選擇性地保留或翻譯部分內容)

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中文網其他相關文章！