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

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

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

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

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

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

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

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

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

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

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

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

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

聽(tīng)起來(lái)不錯(cuò)吧？首先，讓我們回顧幾年前。

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

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

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

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

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

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

對(duì)我來(lái)說(shuō)，“響應(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ì)理念，就像對(duì)它的解釋一樣多。有些已經(jīng)出現(xiàn)又消失了，而另一些則保留了下來(lái)。我們不會(huì)在本手冊(cè)中詳細(xì)介紹任何一種，但我們會(huì)觸及它們的實(shí)際應(yīng)用?，F(xiàn)在讓我們快速介紹其中幾種。

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

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

優(yōu)雅降級(jí)

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

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

移動(dòng)優(yōu)先

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

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

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

您需要支持什麼？

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

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

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

電腦

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

手機(jī)

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

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

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

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

平板電腦

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

混合設(shè)備

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

可穿戴設(shè)備

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

電視

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

汽車

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

遊戲機(jī)

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

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

打印

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

(以下內(nèi)容略去，因?yàn)槠^(guò)長(zhǎng)，且與響應(yīng)式網(wǎng)頁(yè)設(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)頁(yè)設(shè)計(jì)的含義和目的的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！