引言

媒體查詢是 CSS3 的一個新的技術(shù)，它使我們可以針對不同的設(shè)備（或者說，不同的屏幕尺寸和分辨率）來應(yīng)用不同的樣式。

媒體查詢包含一個媒體類型和至少一個使用寬度、高度、顏色等條件限制的表達(dá)式。CSS 用于桌面電腦的屏幕可能在平板電腦、手機(jī)、黑白打印機(jī)以及非視覺網(wǎng)絡(luò)瀏覽器上并不適用。相反，設(shè)計師可能要用一種軟件解決方案來滿足既多樣又具有挑戰(zhàn)性的需求。

當(dāng)您調(diào)整瀏覽器窗口的大小，媒體查詢可以使網(wǎng)頁布局動態(tài)地改變。這是制作響應(yīng)式網(wǎng)頁設(shè)計的關(guān)鍵工具。

示例：

@media screen and (max-width: 600px) {

  body {

    background-color: lightblue;

  }

}

以上 CSS 代碼表示: 如果瀏覽器窗口的寬度（viewport）等于或小于 600px，那么 body 的背景顏色將變?yōu)闇\藍(lán)色。

一、媒體類型

CSS中的媒體查詢主要有以下媒體類型：

all: 適用于所有設(shè)備。

print: 主要用于打印機(jī)和打印預(yù)覽模式。

screen: 主要用于電腦屏幕、平板、智能手機(jī)等。

speech: 適用于基于語音識別的設(shè)備。

這幾種媒體類型的主要作用是根據(jù)設(shè)備的類型來應(yīng)用不同的樣式規(guī)則，使得網(wǎng)站或網(wǎng)頁能在不同設(shè)備上有良好的顯示效果。

舉例說明：

@media print {

    body { }

}

@media screen {

    body { font-size: 13px; }

}

@media screen, print {

    body { line-height: 1.2; }

}

上述代碼中，定義了三組 CSS 規(guī)則。

第一組是適用于打印機(jī)或打印預(yù)覽模式的，其所定義的樣式將在打印界面中生效。

第二組是適用于電腦屏幕和智能手機(jī)等設(shè)備的，其所定義的樣式將在這些設(shè)備的顯示界面中生效。

第三組同時適用于屏幕和打印界面，其所定義的樣式在兩種界面都會生效。

二、媒體特性

媒體查詢中的媒體特性主要包括以下幾種：

width and height：這兩個特性主要用于描述設(shè)備顯示區(qū)域的寬度和高度，可以用來調(diào)整不同設(shè)備下的網(wǎng)頁布局。例如：

@media screen and (max-width: 600px) {

    body {

        background-color: lightblue;

    }

}

以上CSS規(guī)則表示，當(dāng)設(shè)備的屏幕寬度小于或等于600px時，網(wǎng)頁背景顏色變?yōu)闇\藍(lán)色。

orientation：描述設(shè)備的方向，值可以是portrait（豎屏）或landscape（橫屏）。例如：

@media screen and (orientation: portrait) {

    body {

        font-size: 1.2em;

    }

}

以上CSS規(guī)則表示，當(dāng)設(shè)備處于豎屏狀態(tài)時，網(wǎng)頁字體變?yōu)?.2em。

device-width and device-height：這兩個特性用于描述設(shè)備的物理尺寸。例如：

@media screen and (min-device-width: 1200px) {

    body {

        margin: 0 auto;

        width: 1200px;

    }

}

以上CSS規(guī)則表示，若設(shè)備的物理屏幕寬度大于或等于1200px，網(wǎng)頁主體將居中顯示，并且寬度恒定為1200px。

resolution：描述設(shè)備的分辨率。例如：

@media print and (min-resolution: 300dpi) {

    body {

        font-size: 12pt;

    }

}

以上CSS規(guī)則表示，如果設(shè)備的打印分辨率至少為300 dot per inch，網(wǎng)頁字體變?yōu)?2pt。

aspect-ratio and device-aspect-ratio：前者描述的是顯示區(qū)域的寬高比，后者描述設(shè)備物理屏幕的寬高比。例如：

@media screen and (aspect-ratio: 16/9) {

    body {

        background: url('widescreen-bg.jpg');

    }

}

以上CSS規(guī)則表示，如果設(shè)備的顯示區(qū)域的寬高比是16:9，那么網(wǎng)頁背景圖設(shè)為widescreen-bg.jpg。

以上就是媒體查詢中常用的媒體特性以及它們的用途。

三、邏輯操作符

在CSS中，媒體查詢使用邏輯操作符來組合不同的媒體類型和條件。以下是常見的邏輯操作符：

and：使用 and 操作符可以同時匹配多個條件。例如：

@media screen and (min-width: 768px) and (max-width: 1024px) {

  /* 這里是一些規(guī)則 */

}

上面的代碼表示只有在屏幕寬度在 768px 和 1024px 之間時才會應(yīng)用這些規(guī)則。

or：使用 or 操作符可以匹配其中一個條件。例如：

@media (color) or (color-index) {

  /* 這里是一些規(guī)則 */

}

上面的代碼表示只要設(shè)備支持顏色或顏色索引，就會應(yīng)用這些規(guī)則。

not：使用 not 操作符可以排除某個條件。例如：

@media not screen {

  /* 這里是一些規(guī)則 */

}

上面的代碼表示只有在非屏幕設(shè)備上才會應(yīng)用這些規(guī)則。

only：使用only操作符，可以隱藏樣式表不會被舊的瀏覽器應(yīng)用。這是因為老的瀏覽器不支持媒體查詢，它們會忽略only關(guān)鍵字和后面的所有表達(dá)，而新的瀏覽器會把它作為普通的媒體查詢來處理。例如：

@media only screen and (min-width: 600px) {

  .sidebar {

    display: block;

  }

}

在這個例子中，只有設(shè)備類型為屏幕并且視口的最小寬度為600px時，側(cè)邊欄才顯示，并且這個樣式只會被支持媒體查詢的瀏覽器應(yīng)用。

應(yīng)用這些操作符，可以讓開發(fā)者根據(jù)不同的媒體條件來設(shè)計多種布局和樣式，實現(xiàn)響應(yīng)式設(shè)計和優(yōu)化用戶體驗。例如：

在移動端和桌面端顯示不同的導(dǎo)航菜單：

@media screen and (max-width: 768px) {

  /* 移動端 */

  .menu {

    display: none;

  }

  

  .mobile-menu {

    display: block;

  }

}

@media screen and (min-width: 769px) {

  /* 桌面端 */

  .menu {

    display: block;

  }

  

  .mobile-menu {

    display: none;

  }

}

在打印時隱藏某些元素：

@media print {

  .print-hidden {

    display: none;

  }

}

根據(jù)屏幕大小和朝向應(yīng)用不同的背景圖像：

@media screen and (orientation: portrait) {

  .bg-image {

    background-image: url(portrait.jpg);

  }

}

@media screen and (orientation: landscape) {

  .bg-image {

    background-image: url(landscape.jpg);

  }

}

四、link方式引入

媒體查詢可以使用link標(biāo)簽方便地引入：

<link rel="stylesheet" media="(max-width: 768px)" href="example.css">

上述代碼的作用是在瀏覽器視口寬度小于或等于768px時，應(yīng)用example.css樣式表。

注意事項：

媒體查詢的條件必須包含在media屬性中。基于設(shè)備特征的媒體查詢，如空格、冒號和括號等，必須使用引號。

link標(biāo)簽的href屬性中放置的是具有相關(guān)媒體查詢樣式的css樣式表路徑，這個路徑可以是相對路徑或絕對路徑。

瀏覽器無法理解或支持媒體查詢的情況下，會無視media特性并加載樣式表。

在使用的過程中如果有多個css文件，文件多了會影響性能，盡量將多個css文件合并為一個來引入。各個不同的CSS規(guī)則會按照不同的設(shè)備特性來應(yīng)用。

使用媒體查詢時一定要確保網(wǎng)站或應(yīng)用可以在沒有外部CSS文件的情況下正常工作。這樣做將增強(qiáng)功能的穩(wěn)健性，并優(yōu)化根據(jù)設(shè)備特性應(yīng)用樣式的變化。

注意link標(biāo)簽的放置位置，一般是放置在head標(biāo)簽內(nèi)部。

五、編寫位置及順序

媒體查詢通常放在 CSS 文件的底部，或在每個 CSS 規(guī)則集后面，具體取決于邏輯和項目結(jié)構(gòu)。重要的是，它們應(yīng)該放在相關(guān)規(guī)則集的附近，使其易于尋找并理解上下文。

媒體查詢的順序也很重要。通常，你應(yīng)該先進(jìn)行一般的樣式設(shè)置，然后再按照屏幕或設(shè)備的大小從小到大進(jìn)行媒體查詢的設(shè)置。這是由于 CSS 的層疊規(guī)則，后寫的樣式會覆蓋先寫的樣式。所以當(dāng)你在屏幕尺寸變大時，需要更改的樣式應(yīng)該在后面。

例如：

/* 通用樣式 */

body {

  background-color: white;

  color: black;

}

/* 小設(shè)備（小于600px） */

@media only screen and (max-width: 600px) {

  body {

    background-color: blue;

  }

}

/* 中等設(shè)備（601px至768px） */

@media only screen and (min-width: 601px) and (max-width: 768px) {

  body {

    background-color: green;

  }

}

/* 大設(shè)備（769px及以上） */

@media only screen and (min-width: 769px) {

  body {

    background-color: red;

  }

}

在上面的例子中，隨著設(shè)備寬度的增大，背景色會從藍(lán)色變?yōu)榫G色，然后變?yōu)榧t色。這是因為后寫的媒體查詢會覆蓋先寫的媒體查詢。

六、響應(yīng)閾值設(shè)定

媒體查詢的響應(yīng)斷點的閾值設(shè)定通常是基于常見設(shè)備的屏幕尺寸進(jìn)行設(shè)定的，但無固定標(biāo)準(zhǔn)，主要看項目需求和目標(biāo)用戶的設(shè)備種類。

以下是一些常見的設(shè)備斷點：

小于 768px: 適用于手機(jī)及小屏設(shè)備。

768px 至 1024px: 適用于平板電腦和小屏電腦設(shè)備。

大于 1024px: 適用于大屏電腦和電視等設(shè)備。

例如：

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {...}

在這些閾值下，網(wǎng)頁的布局、字體大小等都可能需要相應(yīng)地進(jìn)行調(diào)整，以提供最佳的用戶體驗。

然而，僅僅考慮設(shè)備尺寸是不夠的，也需要考慮視口尺寸、屏幕解析度、設(shè)備方向等多個因素。切忌直接拘泥于某些設(shè)備的尺寸，應(yīng)該考慮的是如何構(gòu)建能夠靈活適應(yīng)各種情況的布局。因此有時候，根據(jù)設(shè)計的具體內(nèi)容和項目需求來設(shè)定斷點可能會更好些。

————————————————

版權(quán)聲明：本文為博主原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接和本聲明。

原文鏈接：https://blog.csdn.net/jieyucx/article/details/132047460