如何在CSS中使用媒體查詢來構建響應式網頁

在本篇文章中，我將首先介紹媒體類型和媒體特性描述符，然後解釋媒體查詢。

媒體類型

在媒體查詢和@import聲明中使用的媒體類型，允許我們確定在哪個媒體上加載CSS文件或CSS片段。

我們有以下媒體類型：

  • all表示所有媒體
  • print用於打印
  • screen用於在屏幕上顯示頁面
  • speech用於屏幕閱讀器

screen是默認值。

以前我們有更多的媒體類型，但大多數已被棄用，因為它們被證明不能有效地確定設備需求。

我們可以在@import語句中使用它們，就像這樣：

@import url(myfile.css) screen;
@import url(myfile-print.css) print;

我們可以在多個媒體類型上加載CSS文件，每個類型之間用逗號隔開：

@import url(myfile.css) screen, print;

在HTML的link標籤中也可以這樣使用：

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

我們不僅僅可以在media屬性和@import聲明中使用媒體類型。還有更多。

媒體特性描述符

首先，讓我們介紹媒體特性描述符。它們是我們可以將其添加到link的media屬性或@import聲明中的附加關鍵字，以對CSS的加載表示更多的條件。

以下是列表：

  • 寬度（width）
  • 高度（height）
  • 設備寬度（device-width）
  • 設備高度（device-height）
  • 寬高比（aspect-ratio）
  • 設備寬高比（device-aspect-ratio）
  • 顏色（color）
  • 顏色索引（color-index）
  • 黑白顯示（monochrome）
  • 分辨率（resolution）
  • 方向（orientation）
  • 掃描方式（scan）
  • 网格（grid）

每個媒體特性描述符都有對應的min-和max-，例如：

  • min-width和max-width
  • min-device-width和max-device-width

等等。

其中一些接受length值，可以使用px或rem或任何長度值來表示。這就是width、height、device-width和device-height的情況。

例如：

@import url(myfile.css) screen and (max-width: 800px);

請注意，我們將每個使用媒體特性描述符的塊都用括號包裹起來。

某些特性描述符接受固定值。orientation用於檢測設備方向，它接受portrait或landscape。

例如：

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (orientation: portrait)" />

scan用於確定屏幕類型，它接受progressive（現代顯示器）或interlace（舊式CRT設備）。

其他一些特性描述符需要一個整數。

比如color檢查設備使用的每個顏色分量的位數。這是非常底層的，但你只需要知道它對你的使用是有用的（比如grid、color-index、monochrome）。

aspect-ratio和device-aspect-ratio接受表示寬高比的比值，表示為分數。

例如：

@import url(myfile.css) screen and (aspect-ratio: 4/3);

resolution表示設備的像素密度，使用分辨率數據類型（如dpi）表示。

例如：

@import url(myfile.css) screen and (min-resolution: 100dpi);

邏輯運算符

我們可以使用and結合規則：

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (max-width: 800px)" />

我們可以使用逗號執行一種“或”類型的邏輯操作，將多個媒體查詢結合在一起：

@import url(myfile.css) screen, print;

我們可以使用not來否定媒體查詢：

@import url(myfile.css) not screen;

重要提示：not只能用於否定整個媒體查詢，因此它必須放置在開頭（或逗號後面）

媒體查詢

我們在@import或HTML的link標籤中應用的所有規則都可以在CSS中應用。

您需要將它們包裹在@media () {}結構中。

例如：

@media screen and (max-width: 800px) {
 /\* 輸入一些CSS \*/
}

這是響應式設計的基礎。

媒體查詢可以非常複雜。此示例只有在屏幕設備上，寬度介於600和800像素之間，並且方向為橫向時才應用CSS：

@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
 /\* 輸入一些CSS \*/
}