設計師可以配合使用者調整設計。 最明顯的例子是使用者裝置的板型規格,包括寬度、裝置顯示比例等等。設計人員可以使用媒體查詢,回應這些不同板型規格。
媒體查詢是透過 @media
關鍵字 (即 CSS 規則型) 啟動,可用於各種用途。
指定不同類型的輸出內容
網站通常會顯示在螢幕上,但 CSS 也可以用於為其他輸出內容設定網站樣式。您可能希望網頁在螢幕上顯示的樣貌與列印時有所不同。您可以透過查詢媒體類型來實現這項功能。
在這個範例中,背景顏色設為灰色。但如果是列印頁面,則背景顏色應為透明。這樣可節省使用者的印表機墨水。
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
您可以在樣式表中使用 @media
at-rule,也可以建立個別的樣式表,並在 link
元素上使用 media
屬性:
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">
如果您未為 CSS 指定任何媒體類型,系統會自動將媒體類型值設為 all
。以下兩個 CSS 區塊具有相同效果:
body {
color: black;
background-color: white;
}
@media all {
body {
color: black;
background-color: white;
}
}
以下兩行 HTML 也是等效的:
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="global.css" media="all">
查詢條件
您可以為媒體類型新增條件。這些稱為媒體查詢。只有在媒體類型相符且條件同時也為 true 時,系統才會套用 CSS。 這些條件稱為媒體功能。
以下是媒體查詢的語法:
@media type and (feature)
如果樣式位於個別的樣式表中,您可以在 link
元素上使用媒體查詢:
<link rel="stylesheet" href="specific.css" media="type and (feature)">
假設您想根據瀏覽器視窗處於橫向模式 (可視區域寬度大於高度) 或直向模式 (可視區域高度大於寬度),套用不同的樣式。有一項名為 orientation
的媒體功能可用來測試是否符合以下條件:
@media all and (orientation: landscape) {
// Styles for landscape mode.
}
@media all and (orientation: portrait) {
// Styles for portrait mode.
}
或者,如果您想要使用不同的樣式表:
<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">
在本例中,媒體類型為 all
。由於這是預設值,因此您可以視需要省略:
@media (orientation: landscape) {
// Styles for landscape mode.
}
@media (orientation: portrait) {
// Styles for portrait mode.
}
或使用個別的樣式表:
<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
您可能適合針對不同的媒體「類型」(例如 print
) 使用不同的樣式表,但建議您為每個媒體查詢使用獨立的樣式表。請改用 @media
at-rule。
根據可視區域大小調整樣式
在回應式設計中,最實用的媒體功能之一是瀏覽器可視區域的尺寸。如要在瀏覽器視窗寬度超過特定寬度時套用樣式,請使用 min-width
。
@media (min-width: 400px) {
// Styles for viewports wider than 400 pixels.
}
請使用 max-width
媒體功能,套用低於特定寬度的樣式:
@media (max-width: 400px) {
// Styles for viewports narrower than 400 pixels.
}
您可以在媒體查詢中使用任何 CSS 長度單位。如果您的內容主要以圖片為主,那麼像素可能最適合您。如果您的內容大多以文字為主,建議您使用以文字大小為依據的相對單位,例如 em
或 ch
:
@media (min-width: 25em) {
// Styles for viewports wider than 25em.
}
您也可以結合媒體查詢來套用多個條件。使用 and
這個字詞來結合媒體查詢:
@media (min-width: 50em) and (max-width: 60em) {
// Styles for viewports wider than 50em and narrower than 60em.
}
根據內容選擇中斷點
媒體功能條件變為 True 的時間點稱為中斷點。建議您根據內容選擇斷點,而非熱門裝置尺寸,因為裝置尺寸會隨著每個技術版本週期而變更。
在這個範例中,50em
是文字行變得過長的點。因此,我們建立了一個中斷點,讓介面更易讀。使用 column-count
屬性後,文字會從該點開始分成兩欄。
@media (min-width: 50em) {
article {
column-count: 2;
}
}
組合
您可以依據可視區域的高度使用媒體查詢,而不只是根據寬度。 有助於最佳化「不需捲動位置」的介面內容。在前述範例中,如果讀者使用寬度較寬但高度較短的瀏覽器視窗,就必須向下捲動一欄,然後再向上捲動,才能到達第二欄的頂端。只有在可視區域的寬度和高度都足夠時,才建議套用資料欄。
您可以合併媒體查詢,讓樣式只在所有條件都符合時才適用。
在本例中,可視區域寬度至少須為 50em
和 60em
,才能套用資料欄樣式。
這些中斷點是根據內容量來選擇。
@media (min-width: 50em) and (min-height: 60em) {
article {
column-count: 2;
}
}
這些範例說明如何使用媒體查詢,將設計調整為符合使用者裝置的板型,但這只是可能性的一小部分。媒體查詢不僅可用於寬度和高度,還可用於存取使用者針對無障礙功能和主題顏色的偏好設定。使用媒體查詢調整版面配置,是打造回應式設計的絕佳起點,這類設計會運用這些功能和其他功能。
隨堂測驗
測試您對回應式媒體查詢的瞭解程度。
媒體查詢只適用於螢幕大小嗎?
螢幕是唯一會顯示或顯示網頁內容的位置嗎?
預設媒體類型為?
all
landscape
none
some
screen
如何避免瀏覽器在行動裝置上縮放設計?
width: 100%
font-size: 200%
<meta name="viewport" content="width=device-width, initial-scale=1">
當瀏覽器視窗「高於」720px
時,適用哪個媒體查詢。
@media (min-width: 720px)
@media (max-width: 720px)
@media (clamp-width: 720px)
@media (width: 720px)