響應式網頁設計簡介：偽元素、媒體查詢等

如今，您的網站將被各種各樣的設備訪問：帶有大顯示器的台式機、中型筆記本電腦、平板電腦、智能手機等等。

作為前端工程師，為了獲得最佳的用戶體驗，您的站點應該調整其佈局以響應這些不同的設備（即，它們不同的屏幕分辨率和尺寸）。 響應用戶設備形式的過程被稱為（你猜對了）響應式網頁設計（RWD）。

為什麼值得花時間研究響應式網頁設計示例並將注意力轉移到 RWD？ 例如，一些網頁設計師將確保跨所有瀏覽器的穩定用戶體驗作為他們畢生的工作，他們經常花費數天時間解決 Internet Explorer 的小問題。

這是一種愚蠢的做法。

Mashable 將 2013 年稱為響應式網頁設計年。 為什麼？ 他們超過 30% 的流量來自移動設備。 他們預計到今年年底這一數字可能達到 50%。 在整個網絡中，2013 年 17.4% 的網絡流量來自智能手機。同時，例如，Internet Explorer 的使用僅佔所有瀏覽器流量的 12%，比去年同期下降了約 4%（根據到 W3 學校）。 如果您正在針對特定瀏覽器進行優化，而不是針對全球智能手機人口進行優化，那麼您就是只見樹木不見森林。 在某些情況下，這可能意味著成功與失敗之間的差異——響應式設計對轉化率、搜索引擎優化、跳出率等都有影響。

響應式網頁設計方法

RWD 通常被掩蓋的是，它不僅僅是調整網頁的外觀。 相反，重點應該放在邏輯上調整您的網站以適應不同設備的使用。 例如：使用鼠標不能提供與觸摸屏相同的用戶體驗。 你不同意嗎？ 您的響應式移動與桌面佈局應反映這些差異。

同時，您不希望針對可能查看的數十種不同屏幕尺寸中的每一種都完全重寫您的網站——這種方法根本不可行。 相反，解決方案是實現靈活的響應式設計元素，這些元素使用相同的 HTML 代碼來適應用戶的屏幕尺寸。

從技術的角度來看，解決方案在於這個響應式設計教程：使用 CSS 媒體查詢、偽元素、靈活的設置網格佈局和其他工具來動態調整到給定的分辨率。

響應式設計中的媒體查詢

媒體類型首先出現在 HTML4 和 CSS2.1 中，這使得可以為屏幕和打印放置單獨的 CSS。 通過這種方式，可以為頁面的計算機顯示相對於其打印輸出設置單獨的樣式。

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

要么

@media screen { * { background: silver } }

在 CSS3 中，您可以根據頁面寬度定義樣式。 由於頁面寬度與用戶設備的大小相關，因此此功能允許您為不同的設備定義不同的佈局。 注意：所有主流瀏覽器都支持媒體查詢。

這個定義可以通過基本屬性的設置來實現： max-width 、 device-width 、 orientation和color 。 其他定義也是可能的； 但在這種情況下，需要注意的最重要的事情是最小分辨率（寬度）和方向設置（橫向與縱向）。

下面的響應式 CSS 示例顯示了針對頁面寬度啟動某個 CSS 文件的過程。 例如，如果 480px 是當前設備屏幕的最大分辨率，則將應用 main_1.css 中定義的樣式。

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

我們還可以在同一個 CSS 樣式表中定義不同的樣式，以便僅在滿足某些約束時才使用它們。 例如，我們的響應式 CSS 的這一部分只有在當前設備的寬度超過 480 像素時才會使用：

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

“智能變焦”

移動瀏覽器使用所謂的“智能縮放”為用戶提供“卓越”的閱讀體驗。 基本上，智能縮放用於按比例減小頁面大小。 這可以通過兩種方式表現出來：(1) 用戶啟動的縮放（例如，在 iPhone 屏幕上點擊兩次以放大當前網站），以及 (2) 最初在加載。

鑑於我們可以只使用響應式媒體查詢來解決智能縮放可能針對的任何問題，因此通常需要（甚至有必要）禁用縮放並確保您的頁面內容始終填滿瀏覽器：

 <meta name="viewport" content="width=device-width, initial-scale=1" />

通過將initial-scale設置為 1，我們控制了初始頁面縮放級別（即頁面加載時的縮放量）。 如果您將網頁設計為響應式，那麼您的流暢、動態佈局應該以智能方式填滿智能手機屏幕，而無需任何初始縮放。

此外，我們可以使用user-scalable=false完全禁用縮放。

頁面寬度

假設您希望提供三種不同的響應式頁面佈局：一種用於台式機，一種用於平板電腦（或筆記本電腦），一種用於智能手機。 您應該將哪些頁面尺寸定位為截止值（例如，480 像素）？

不幸的是，沒有針對頁面寬度的定義標準，但經常使用以下示例響應值：

• 320像素
• 480像素
• 600像素
• 768像素
• 900像素
• 1024像素
• 1200像素

但是，存在許多不同的寬度定義。 例如，320 及以上有五個默認的 CSS3 媒體查詢增量：480、600、768、992 和 1382 像素。 除了本響應式 Web 開發教程中的給定示例外，我還可以列舉至少十種其他方法。

使用這些合理的增量集，您可以定位大多數設備。 在實踐中，通常不需要單獨處理所有上述頁面寬度示例——七種不同的分辨率可能是多餘的。 根據我的經驗，320px、768px 和 1200px 是最常用的； 這三個值應該足以分別針對智能手機、平板電腦/筆記本電腦和台式機。

偽元素

基於上一個示例中的響應式媒體查詢，您可能還希望根據用戶設備的大小以編程方式顯示或隱藏某些信息。 幸運的是，這也可以使用下面教程中概述的純 CSS 來完成。

對於初學者來說，隱藏一些元素（ display: none; ）在減少智能手機佈局的屏幕元素數量時可能是一個很好的解決方案，因為智能手機佈局幾乎總是空間不足。

但除此之外，您還可以使用 CSS 偽元素（選擇器）獲得創意，例如:before和:after 。 注意：再一次，所有主流瀏覽器都支持偽元素。

偽元素用於將特定樣式應用於 HTML 元素的特定部分，或選擇元素的某個子集。 例如， :first-line偽元素允許您僅在某個選擇器的第一行定義樣式（例如， p:first-line將應用於所有p的第一行）。 類似地， a:visited偽元素將允許您在所有a用戶先前訪問過的鏈接的 a 上定義樣式。 顯然，這些可以派上用場。

這是一個簡單的響應式設計示例，其中我們為登錄按鈕創建了三種不同的佈局，一種用於台式機、平板電腦和智能手機。 在智能手機上，我們將有一個單獨的圖標，而平板電腦將有相同的圖標，並帶有“用戶名”。 最後，對於桌面，我們還將添加一條簡短的說明消息（“插入您的用戶名”）。

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

僅使用:before和:after偽元素，我們可以實現以下目標：

想要了解更多關於偽元素的魔力，Chris Coyier 有一篇關於 CSS-Tricks 的文章。

那麼，我應該從哪裡開始？

在本教程中，我們已經為響應式網頁設計（即媒體查詢和偽元素）建立了一些構建塊，並為每個構建塊提供了一些示例。 我們從這裡去哪裡？

您應該採取的第一步是將所有網頁元素組織成各種屏幕尺寸。

看看上面展示的佈局的桌面版本。 在這種情況下，左側的內容（綠色矩形）可以用作某種主菜單。 但是，當使用分辨率較低的設備（例如，平板電腦或智能手機）時，此主菜單以全寬顯示可能是有意義的。 使用媒體查詢，您可以按如下方式實現此行為：

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

不幸的是，隨著前端變得越來越複雜，這種基本方法通常是不夠的。 由於網站的內容組織在移動版和桌面版之間通常存在顯著差異，因此用戶體驗最終不僅取決於響應式 CSS 的使用，還取決於 HTML 和 JavaScript 的使用。

在確定不同設備的響應式佈局時，幾個關鍵元素很重要。 與我們有足夠空間存儲內容的桌面版本不同，智能手機的開發要求更高。 比以往任何時候都更有必要對特定內容進行分組並分層定義各個部分的重要性。

您的內容的各種用途也很重要。 例如，當您的用戶有鼠標時，他們可以將光標設置在某些元素上方以獲取更多信息，因此您（作為 Web 開發人員）可以通過這種方式留下一些待收集的信息——但這不會是當您的用戶使用智能手機時。

此外，如果您在網站上留下按鈕，然後在智能手機上呈現比普通手指還小的按鈕，您將在網站的使用和感覺方面產生不確定性。 請注意，在上圖中，標準 Web 視圖（左側）使某些元素在較小的設備上查看時完全無法使用。

這種行為還會增加用戶出錯的機會，從而降低他們的體驗。 在實踐中，這可能表現為頁面瀏覽量減少、銷售額減少和整體參與度降低。

其他響應式設計元素

使用媒體查詢時，應牢記所有頁面元素的行為，而不僅僅是那些被定位的元素，尤其是在使用流體網格時，在這種情況下（與固定尺寸相反）頁面將在任何給定的位置完全填充時刻，按比例增加和減少內容大小。 由於寬度是按百分比設置的，因此在這種流暢的佈局下，圖形元素（即圖像）可能會被扭曲和損壞。 對於圖像，一種解決方案如下：

 img { max-width: 100% }

其他元素應以類似方式處理。 例如，RWD 中圖標的一個很好的解決方案是使用 IconFonts。

關於流體網格系統的幾句話

當我們討論完全設計適配的過程時，我們經常關注最佳的觀看體驗（從用戶的角度）。 這樣的討論應該包括最大程度的便利使用、元素重要性（基於可見的頁面區域）、便利的閱讀和直觀的導航。 在這些類別中，最重要的組成部分之一是內容寬度調整。 例如，所謂的流體網格系統已經設置了元素，即基於相對寬度作為整個頁面的百分比的元素。 這樣，響應式網頁設計系統中的所有元素都會隨著頁面的大小自動調整。

儘管這些流體網格系統與我們在這裡討論的內容密切相關，但它們實際上是一個完全獨立的實體，需要額外的教程來詳細討論。 因此，我將僅提及一些支持此類行為的主要框架：Bootstrap、Unsemantic 和 Brackets。

結論

直到最近，網站優化還是一個專門用於根據不同 Web 瀏覽器定制功能的術語。 除了我們今天面臨的不同瀏覽器標準不可避免的鬥爭之外，這個術語現在還假設通過響應式網頁設計適應設備和屏幕尺寸。 要在現代網絡上剪裁，您的網站不僅要知道誰在查看它，還要知道如何查看它。