回應式網頁設計基本概念

如何建立符合瀏覽裝置需求和功能的網站。

行動裝置上網的應用方式持續達到天文速度,而這些裝置通常受到螢幕大小限制,且需要改變內容在畫面上的呈現方式。

回應式網頁設計 (原由 Ethan Marcotte in A List Apart 定義) 會回應使用者及其所用裝置的需求。版面配置會根據裝置的大小和功能而變化。舉例來說,在手機上的使用者會看到單欄檢視顯示的內容,而平板電腦則可能會在兩欄中顯示相同的內容。

在這部影片中,設計畫面從小範圍變成大範圍的可視區域,回應可用的螢幕空間。

手機、平板電腦、平板電腦、電腦、遊戲主機、電視,甚至是穿戴式裝置有多種螢幕大小。螢幕大小會不斷變動,因此請務必確保網站能配合任何的螢幕大小調整,無論是現在或未來都適用。此外,我們與裝置互動的功能也不同。舉例來說,某些訪客會使用觸控螢幕。現代回應式設計考量以上所有要素,可為使用者提供最佳體驗。

設定可視區域

針對各種裝置進行最佳化的網頁必須在文件標題中加入中繼可視區域標記。 中繼可視區域標記能指示瀏覽器如何控制網頁的尺寸和縮放。

為提供最佳體驗,行動瀏覽器會在電腦螢幕的寬度 (通常約為 980px,但依裝置而異) 轉譯網頁,然後增加字型大小,並配合螢幕縮放內容,讓內容看起來更美觀。這表示字型大小可能不一致,導致使用者可能需要輕觸兩下或雙指撥動縮放,才能查看內容並與內容互動。

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

使用中繼可視區域值 width=device-width 會指示網頁以符合裝置獨立像素的螢幕寬度。裝置 (或密度) 的獨立像素代表單一像素,而在高密度螢幕上可能會由許多實體像素組成。如此一來,不論在小型手機或大型電腦螢幕上顯示,頁面都能根據不同的螢幕大小重新調整內容。

螢幕截圖顯示縮小了文字,因此難以閱讀。
示範在沒有可視區域中繼標記的情況下,網頁載入的方式。查看 Glitch 的範例
顯示同一頁面螢幕截圖,其文字大小可閱讀。
這個範例說明使用可視區域中繼標記,在裝置上載入的方式。查看 Glitch 的範例

部分瀏覽器會在旋轉為橫向模式時保持頁面寬度固定,並縮放而非重排來填滿畫面。新增 initial-scale=1 值會指示瀏覽器在各種裝置螢幕方向的情況下,在 CSS 像素與裝置獨立像素之間建立 1:1 的關係,以便網頁充分利用橫向寬度。

沒有含有 widthinitial-scale<meta name="viewport"> 標記 Lighthouse 稽核功能可協助您自動執行相關程序,確保 HTML 文件正確使用可視區域中繼標記。

確保可存取可視區域

除了設定 initial-scale 以外,您也可以在可視區域中設定下列屬性:

  • minimum-scale
  • maximum-scale
  • user-scalable

設定後,使用者就無法縮放可視區域,進而造成無障礙功能問題。因此不建議使用這些屬性。

根據可視區域調整內容大小

在電腦和行動裝置上,使用者習慣垂直捲動瀏覽網站,但不能水平捲動,因此必須水平捲動或縮小才能檢視整個頁面,導致使用者體驗不佳。

使用中繼可視區域標記開發行動版網站時,很容易不小心建立內容不符合指定可視區域的網頁。舉例來說,如果圖片的寬度大於可視區域,可能會導致可視區域水平捲動。您應該配合可視區域的寬度調整內容,讓使用者不必橫向捲動畫面。

「內容大小未針對可視區域正確調整」Lighthouse 稽核功能可協助您自動偵測溢位內容的處理程序。

圖片

圖片的尺寸固定,如果大於可視區域,系統會顯示捲軸。解決這個問題的常見方法是將所有圖片設為 100%max-width。這樣一來,當可視區域大小小於圖片時,圖片會縮小,以符合圖片本身的空間。不過,由於 max-width (而不是 width ) 是 100%,因此圖片的延展不會超過原始大小。一般來說,將下列程式碼新增至樣式表是很安全的做法,這樣圖片絕不會發生問題導致捲軸。

img {
  max-width: 100%;
  display: block;
}

將圖片尺寸新增至 img 元素

使用 max-width: 100% 時,覆寫圖片的自然尺寸時,仍應在 <img> 標記上使用 widthheight 屬性。這是因為新式瀏覽器會在圖片載入前使用這項資訊保留圖片空間,避免在內容載入時版面配置位移

版面配置

由於不同裝置 (例如在手機和平板電腦之間,甚至是不同手機) 間,CSS 像素的螢幕尺寸和寬度差異很大,因此內容不應仰賴特定可視區域寬度以便正常顯示。

在過去,這是用來建立版面配置的必要設定元素,以百分比表示。在以下範例中,您可以看到雙欄版面配置搭配浮動元素,並以像素設定大小。當可視區域小於欄的總寬度時,我們必須水平捲動才能看到內容。

雙欄版面配置的螢幕截圖,其中大多數為可視區域外的第二欄
使用像素的浮動版面配置。查看 Glitch 的範例

如果使用寬度百分比,這些欄將一律維持在容器的某個百分比。這表示欄的內容會變窄,而非建立捲軸。

Flexbox、格線版面配置和 Multicol 等現代化的 CSS 版面配置技術,可更輕鬆地建立彈性格線。

彈性凸版

當您有一組不同大小的項目,且希望這些項目能夠順暢地排入一列或一列時,這個版面配置方法就非常實用。因為較小的項目佔用較少空間,而大型項目則會取得更多空間。

.items {
  display: flex;
  justify-content: space-between;
}

在回應式設計中,您可以使用 Flexbox 將多個項目顯示為單一資料列,或在可用空間減少時包裝至多個資料列。

進一步瞭解 Flexbox

CSS 格線版面配置

CSS 格線版面配置可讓您以直接的方式建立彈性格線。如果我們考慮使用先前的浮動式範例,而不是以百分比建立資料欄,則可以使用格線版面配置和 fr 單位,後者代表容器中的一部分可用空間。

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

格線也可以用來建立一般的格狀版面配置,並容納更多項目。隨著螢幕大小縮小,可用的曲目數量會隨之減少。在下方的示範中,每列可以容納多少資訊卡,最小尺寸為 200px

進一步瞭解 CSS 格線版面配置

多欄版面配置

針對某些類型的版面配置,您可以使用多欄版面配置 (Multicol),透過 column-width 屬性建立回應式欄數。在下方的示範中,您可以看到新增的資料欄如果還有另一個 200px 欄。

進一步瞭解 Multicol

使用 CSS 媒體查詢提高回應速度

有時候,您需要對版面配置進行更廣泛的變更,才能支援特定的螢幕大小。這時媒體查詢就派上用場了。

媒體查詢是可套用至 CSS 樣式的簡單篩選器。您可以輕鬆根據轉譯內容的裝置類型或裝置的功能 (例如寬度、高度、螢幕方向、懸停功能,以及裝置是否做為觸控螢幕) 來變更樣式。

如要提供不同樣式以進行列印,您必須指定輸出類型,以便加入含有列印樣式的樣式表,如下所示:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

您也可以使用媒體查詢,在主要樣式表中加入列印樣式:

@media print {
  /* print styles go here */
}

針對回應式網頁設計,我們通常會查詢裝置的功能,以便為較小的螢幕提供不同的版面配置,或是偵測到訪客正在使用觸控螢幕。

根據可視區域大小進行媒體查詢

我們可以利用媒體查詢打造回應式體驗,將特定樣式套用至小螢幕、大螢幕,以及兩者之間的任何位置。這裡要偵測到的功能就是螢幕大小,因此可以測試下列項目。

  • width (min-widthmax-width)
  • height (min-heightmax-height)
  • orientation
  • aspect-ratio

這些功能都具備優異的瀏覽器支援,如需更多詳細資料,包括瀏覽器支援資訊,請參閱 MDN 的寬度高度方向長寬比

根據裝置功能進行媒體查詢

鑑於可用的裝置種類繁多,我們無法假設每部大型裝置都是一般桌上型電腦或筆記型電腦,或者使用者只會透過小型裝置使用觸控螢幕。在媒體查詢規格中新增一些更新內容後,我們即可測試各項功能,例如與裝置互動的指標類型,以及使用者是否可以將遊標懸停在元素上。

  • hover
  • pointer
  • any-hover
  • any-pointer

請在不同的裝置 (例如一般電腦和手機或平板電腦) 上查看這個示範。

這些新功能在所有新式瀏覽器中都能獲得良好的支援。請在 MDN 頁面瞭解hover任意懸停指標任意指標的相關 MDN。

正在使用 any-hoverany-pointer

any-hoverany-pointer 功能可測試使用者是否能夠懸停,或者使用該類型指標,即使並非他們與裝置的主要互動方式也一樣。使用這類功能時請務必謹慎。 強迫使用者在使用觸控螢幕時切換到滑鼠並不太容易!不過,若想分析使用者擁有哪種裝置,any-hoverany-pointer 就能派上用場。 舉例來說,如果筆記型電腦搭載觸控螢幕和觸控板,除了可以懸停遊標之外,也應符合粗略和精確的指標。

如何選擇中斷點

請勿根據裝置類別定義中斷點。根據目前使用的特定裝置、產品、品牌名稱或作業系統定義中斷點,可能會導致維護成本不足。而內容本身會決定版面配置如何根據容器進行調整。

先從小規模開始,再積極管理主要中斷點

先設計適合小螢幕尺寸的內容,然後展開畫面,直到有需要的中斷點為止。這樣您就能根據內容最佳化中斷點,盡可能減少中斷點數量。

我們以剛剛看過的例子來說明:天氣預報。第一步是確保預測在小螢幕上看起來沒問題。

天氣應用程式在行動裝置上的螢幕截圖
應用程式畫面較窄。

接下來,您可以調整瀏覽器大小,直到元素之間有太多空白,導致預測結果看起來不佳。這項決定有點主觀,但高於 600px 幅度確實太大。

天氣應用程式的螢幕截圖,在不同項目之間有夠長的差距
在我們覺得調整設計時的應用程式。

如要在 600px 插入中斷點,請在 CSS 的結尾為元件建立兩個媒體查詢,一個用於瀏覽器處於 600px 以下狀態時使用,另一個用於寬度超過 600px 時。

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

最後,重構 CSS。在 600pxmax-width 媒體查詢中,新增僅適用於小螢幕的 CSS。在 601pxmin-width 媒體查詢中,為較大的螢幕新增 CSS。

必要時挑選微小的中斷點

除了在版面配置大幅變更時選擇主要中斷點之外,我們也建議您針對小幅變更進行調整。舉例來說,您可以在主要中斷點之間調整元素邊界或邊框間距,或是增加字型大小,讓元素在版面配置中更加自然。

首先,請對小螢幕版面配置進行最佳化調整。在本例中,我們在可視區域寬度大於 360px 時提高字型。其次,如果有足夠空間,我們可以將高溫和低溫隔開,藉此讓兩者在同一線條上,而不是彼此重疊。另外,我們還要放大天氣圖示。

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

同樣地,在大螢幕上,最好限制預測面板的寬度上限,以免佔用整個螢幕寬度。

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

提供最佳的閱讀文字體驗

經典可讀理論建議,理想的資料欄每行應含有 70 至 80 個字元 (英文約 8 至 10 個字)。 因此,只要文字區塊的寬度超過約 10 個字,請考慮新增中斷點。

行動裝置上的文字網頁螢幕截圖
行動裝置上顯示的文字。
電腦瀏覽器中的文字頁面螢幕截圖
在電腦版瀏覽器中閱讀的文字會加上中斷點,藉此限制行長度。

接下來,讓我們進一步探討上述網誌文章範例。 在小螢幕上,1em 的 Roboto 字型在每行提供 10 個字詞,但較大的螢幕需要中斷點。在這種情況下,如果瀏覽器寬度大於 575px,則理想內容寬度為 550px

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

避免只是隱藏內容

根據螢幕大小選擇要隱藏或顯示的內容時,請務必謹慎。請勿只是因為無法讓內容填滿螢幕,就只隱藏內容。 螢幕大小無法明確表示使用者可能想要的內容。例如,消除天氣預報中的花粉數量後,可能會對春季造成過敏的困擾,而需要相關資訊才能判斷是否可以出門。

在 Chrome 開發人員工具中查看媒體查詢中斷點

設定媒體查詢中斷點後,建議您查看網站搭配這些中斷點的呈現方式。 您可以調整瀏覽器視窗的大小來觸發中斷點,但 Chrome 開發人員工具內建功能,可讓您輕鬆查看頁面在不同中斷點下的呈現方式。

開發人員工具的螢幕截圖,已開啟天氣應用程式,寬度為 822 像素。
開發人員工具顯示天氣應用程式,當應用程式檢視更廣泛的可視區域時,便會顯示應用程式。
開發人員工具的螢幕截圖,已開啟天氣應用程式,並選取寬度為 436 像素。
開發人員工具顯示天氣應用程式,當檢視範圍較小時。

如何查看不同中斷點下方的網頁:

開啟開發人員工具,然後開啟「裝置模式」。根據預設,這會以回應式模式開啟。

如要查看媒體查詢,請開啟「Device Mode」(裝置模式) 選單並選取「Show media query」(顯示媒體查詢),將中斷點顯示為網頁上方的色條。

在該媒體查詢啟用期間,按一下任一長條即可查看網頁。在長條上按一下滑鼠右鍵,即可跳到媒體查詢的定義。