響應(yīng)式網(wǎng)頁設(shè)計(jì)：適應(yīng)所有屏幕

響應(yīng)式網(wǎng)頁設(shè)計(jì) (RWD) 是一種允許網(wǎng)站適應(yīng)各種尺寸屏幕的設(shè)計(jì)方法，對于支持日益增多的用于瀏覽網(wǎng)頁的設(shè)備至關(guān)重要。

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

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

響應(yīng)式設(shè)計(jì)對于 SEO 至關(guān)重要，因?yàn)樗试S一個(gè)網(wǎng)站在多種設(shè)備和屏幕尺寸上提供良好的用戶體驗(yàn)，使 Google 更容易理解和索引內(nèi)容。這將導(dǎo)致更長的網(wǎng)站訪問時(shí)間和更高的轉(zhuǎn)化率。

從單一屏幕到多屏?xí)r代

過去，網(wǎng)站設(shè)計(jì)很簡單：為 15 英寸顯示器設(shè)計(jì)一個(gè)網(wǎng)站或應(yīng)用程序，除了瀏覽器之間的兼容性問題外，就完成了。

然后，帶有網(wǎng)絡(luò)瀏覽器的手機(jī)出現(xiàn)了，打亂了我們輕松的生活。最糟糕的是，人們喜歡在手機(jī)上瀏覽網(wǎng)頁！2016 年，移動設(shè)備上的網(wǎng)頁瀏覽量首次超過了桌面瀏覽量。

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

那么，我們?nèi)绾沃С诌@種不斷增長的設(shè)備陣列呢？答案是響應(yīng)式網(wǎng)頁設(shè)計(jì)，它利用允許網(wǎng)站適應(yīng)各種尺寸屏幕的技術(shù)。

許多較舊的網(wǎng)站或由時(shí)間有限的人員維護(hù)的項(xiàng)目都沒有響應(yīng)性。例如，Vassal 游戲引擎的網(wǎng)站：

許多其他網(wǎng)站，例如 SitePoint.com，則完全具有響應(yīng)性：

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

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

響應(yīng)式設(shè)計(jì)的歷史

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

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

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

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

這導(dǎo)致了媒體查詢以及其他技術(shù)和技術(shù)的增長和整合，例如靈活的圖像和網(wǎng)格，我們將在本書中介紹所有這些內(nèi)容。

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

響應(yīng)式設(shè)計(jì)中的設(shè)計(jì)理念

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

漸進(jìn)增強(qiáng)

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

優(yōu)雅降級

移動瀏覽的激增顛覆了更傳統(tǒng)的網(wǎng)站設(shè)計(jì)路徑。過去，您在工作的平臺（通常是計(jì)算機(jī)）上開始設(shè)計(jì)，然后剝離樣式和功能以支持屏幕較小或?qū)δ承┕δ艿闹С州^少的設(shè)備。

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

移動優(yōu)先

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

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

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

您需要支持什么？

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

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

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

電腦

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

手機(jī)

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

在 iOS 上，移動瀏覽通常僅通過一個(gè)瀏覽器進(jìn)行，并且設(shè)備的尺寸更加一致。

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

您還需要考慮用戶主要使用觸摸設(shè)備而不是點(diǎn)擊設(shè)備進(jìn)行瀏覽，這極大地影響了行為。

平板電腦

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

混合設(shè)備

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

可穿戴設(shè)備

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

電視

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

汽車

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

游戲機(jī)

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

總而言之，您無法預(yù)測任何人將在何處以及如何查看您的網(wǎng)站，因此請將其構(gòu)建為可適應(yīng)、靈活和響應(yīng)的。

打印

打?。窟@不是一本網(wǎng)頁設(shè)計(jì)書籍嗎？是的，但您的網(wǎng)頁的打印版本仍然會被頻繁訪問，無論是實(shí)際的物理打印還是在離線閱讀器（如 Instapaper 或 Pocket）上呈現(xiàn)您的內(nèi)容。對于某些內(nèi)容，“打印”仍然是相關(guān)的。

(以下內(nèi)容略去，因?yàn)槠^長，且與響應(yīng)式網(wǎng)頁設(shè)計(jì)核心內(nèi)容關(guān)聯(lián)性較弱。 可以根據(jù)需要選擇性地保留或翻譯部分內(nèi)容)

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.

以上是響應(yīng)式網(wǎng)頁設(shè)計(jì)的含義和目的的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！