引言

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

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

當(dāng)您調(diào)整瀏覽器窗口的大小，媒體查詢可以使網(wǎng)頁(yè)布局動(dòng)態(tài)地改變。這是制作響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的關(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: 適用于基于語(yǔ)音識(shí)別的設(shè)備。

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

舉例說(shuō)明：

@media print {

    body { }

}

@media screen {

    body { font-size: 13px; }

}

@media screen, print {

    body { line-height: 1.2; }

}

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

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

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

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

二、媒體特性

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

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

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

    body {

        background-color: lightblue;

    }

}

以上CSS規(guī)則表示，當(dāng)設(shè)備的屏幕寬度小于或等于600px時(shí)，網(wǎng)頁(yè)背景顏色變?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)時(shí)，網(wǎng)頁(yè)字體變?yōu)?.2em。

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

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

    body {

        margin: 0 auto;

        width: 1200px;

    }

}

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

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

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

    body {

        font-size: 12pt;

    }

}

以上CSS規(guī)則表示，如果設(shè)備的打印分辨率至少為300 dot per inch，網(wǎng)頁(yè)字體變?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)頁(yè)背景圖設(shè)為widescreen-bg.jpg。

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

三、邏輯操作符

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

and：使用 and 操作符可以同時(shí)匹配多個(gè)條件。例如：

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

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

}

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

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

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

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

}

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

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

@media not screen {

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

}

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

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

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

  .sidebar {

    display: block;

  }

}

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

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

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

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

  /* 移動(dòng)端 */

  .menu {

    display: none;

  }

  

  .mobile-menu {

    display: block;

  }

}

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

  /* 桌面端 */

  .menu {

    display: block;

  }

  

  .mobile-menu {

    display: none;

  }

}

在打印時(shí)隱藏某些元素：

@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時(shí)，應(yīng)用example.css樣式表。

注意事項(xiàng)：

媒體查詢的條件必須包含在media屬性中?；谠O(shè)備特征的媒體查詢，如空格、冒號(hào)和括號(hào)等，必須使用引號(hào)。

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

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

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

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

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

五、編寫位置及順序

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

媒體查詢的順序也很重要。通常，你應(yīng)該先進(jìn)行一般的樣式設(shè)置，然后再按照屏幕或設(shè)備的大小從小到大進(jìn)行媒體查詢的設(shè)置。這是由于 CSS 的層疊規(guī)則，后寫的樣式會(huì)覆蓋先寫的樣式。所以當(dāng)你在屏幕尺寸變大時(shí)，需要更改的樣式應(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è)備寬度的增大，背景色會(huì)從藍(lán)色變?yōu)榫G色，然后變?yōu)榧t色。這是因?yàn)楹髮懙拿襟w查詢會(huì)覆蓋先寫的媒體查詢。

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

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

以下是一些常見(jiàn)的設(shè)備斷點(diǎn)：

小于 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è)的布局、字體大小等都可能需要相應(yīng)地進(jìn)行調(diào)整，以提供最佳的用戶體驗(yàn)。

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

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

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

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