CSS媒體查詢和響應式設計

如何在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;

相同的作品linkHTML中的標記:

<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宣言。還有更多

媒體功能描述符

首先,我們來介紹一下媒體特徵描述符。它們是我們可以添加到media的屬性link或到@import聲明,以表示有關CSS加載的更多條件。

以下是它們的列表:

  • width
  • height
  • device-width
  • device-height
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • orientation
  • scan
  • grid

它們每個都有對應的min- *和max- *,例如:

  • min-widthmax-width
  • min-device-widthmax-device-width

等等。

其中一些接受長度值,該長度值可以表示為px或者rem或任何長度值。是這樣的widthheightdevice-widthdevice-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它檢查設備使用的每個顏色分量的位數。非常低級,但是您只需要知道它的使用位置即可(例如gridcolor-indexmonochrome)。

aspect-ratiodevice-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或linkHTML標記也可以在CSS內應用。

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

例子:

@media screen and (max-width: 800px) {
  /* enter some CSS */
}

這是響應式設計

媒體查詢可能非常複雜。此示例僅在屏幕設備,寬度在600到800像素之間且方向為橫向的情況下才應用CSS:

@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
  /* enter some CSS */
}

免費下載我的CSS手冊


更多CSS教程: