如風般魅影 ·@media 媒體查詢
這個屬性通常是用在不同屏幕下可以設置不同的樣式，它多用在響應式頁面中。
1. 官方定義
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。
2. 慕課解釋
@media 通常被人們稱為媒體查詢，其實就是響應式，它通過設定后面的參數來實現在不同的瀏覽器可視尺寸下的展示效果。
它不僅僅可以用來設置 CSS 樣式，也可以設置 HTML頁面中 link 的引用。
3. 語法
在開始使用 @media 標簽前，首先需要在 .html 文件中設置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no>
這段代碼主要是用來兼容移動設備的展示效果。
我們簡單的對這幾個參數進行一下解釋：
| 參數名 | 含義 |
|---|---|
| width = device-width | 寬度等于當前設備的寬度 |
| initial-scale | 初始的縮放比例（默認設置為1.0） |
| minimum-scale | 允許用戶縮放到的最小比例（默認設置為1.0） |
| maximum-scale | 允許用戶縮放到的最大比例（默認設置為1.0） |
| user-scalable | 用戶是否可以手動縮放（默認設置為no） |
說明：我們設置時候通常規則如下：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover，user-scalable=no" name="viewport" />
意思是縮放比例為 1，最大縮放比例為 1 不可以手動縮放。里面的 viewport-fit 是指瀏覽器視圖填充方式是否全屏。
@media 標簽
下面我們就來看一下@media 標簽的使用方法，先看一下語法：
@media mediatype and|not|only (media feature) {
CSS Code...
}
說明： @media 不同于其它的 CSS3 屬性，它是一個標簽，后面跟了一個名稱，和一個大括號，這和我們 JavaScript 函數很像，大家也可以這么理解。
mediatype 用來描述當前瀏覽器所在設備的類型，比如是計算機顯示器、手機、電視等等。
mediatype 有一個表：
| 媒體類型 | 兼容性 | 說明 |
|---|---|---|
| all | 所有瀏覽器 | 用于所有媒體設備類型 |
| aural | Opera | 用于語音和音樂合成器 |
| braille | Opera | 用于觸覺反饋設備 |
| handheld | Chrome,Safari,Opera | 用于小型或手持設備 |
| 所有瀏覽器 | 用于打印機 | |
| projection | Opera | 用于投影圖像，如幻燈片 |
| screen | 所有瀏覽器 | 用于計算機顯示器 |
| tty | Opera | 用于使用固定間距字符格的設備。如電傳打字機和終端 |
| tv | Opera | 用于電視類設備 |
| embossed | Opera | 用于凸點字符（盲文）印刷設備 |
說明：我們常用的媒體類型通常設置為 screen。代碼如下
@media screen and (max-width: 500px) {
}
上面就是所有瀏覽器中適用我們 and 之后的規則。
關鍵字
關鍵字就是用來描述響應條件的描述，具體作用如下：
- and 就是和某種定制的屏幕寬度下；
- not 關鍵字是用來排除某種指定的媒體類型；
- only 用來定某種特定的媒體類型。
media feature
括號內的它就是用來指定分辨率的。寫法如下：
@media only screen and (max-width: 500px) {
}
它的意思就是當瀏覽器的可視區域小于 500px 時候使用 {} 內的規則，具體規則如下：
| 值 | 描述 |
|---|---|
| aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的比率。 |
| color | 定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等于0。 |
| color-index | 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等于0。 |
| device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的比率。 |
| device-height | 定義輸出設備的屏幕可見高度。 |
| device-width | 定義輸出設備的屏幕可見寬度。 |
| grid | 用來查詢輸出設備是否使用柵格或點陣。 |
| height | 定義輸出設備中的頁面可見區域高度。 |
| max-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-color | 定義輸出設備每一組彩色原件的最大個數。 |
| max-color-index | 定義在輸出設備的彩色查詢表中的最大條目數。 |
| max-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-device-height | 定義輸出設備的屏幕可見的最大高度。 |
| max-device-width | 定義輸出設備的屏幕最大可見寬度。 |
| max-height | 定義輸出設備中的頁面最大可見區域高度。 |
| max-monochrome | 定義在一個單色框架緩沖區中每像素包含的最大單色原件個數。 |
| max-resolution | 定義設備的最大分辨率。 |
| max-width | 定義輸出設備中的頁面最大可見區域寬度。 |
| min-aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的最小比率。 |
| min-color | 定義輸出設備每一組彩色原件的最小個數。 |
| min-color-index | 定義在輸出設備的彩色查詢表中的最小條目數。 |
| min-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最小比率。 |
| min-device-width | 定義輸出設備的屏幕最小可見寬度。 |
| min-device-height | 定義輸出設備的屏幕的最小可見高度。 |
| min-height | 定義輸出設備中的頁面最小可見區域高度。 |
| min-monochrome | 定義在一個單色框架緩沖區中每像素包含的最小單色原件個數 |
| min-resolution | 定義設備的最小分辨率。 |
| min-width | 定義輸出設備中的頁面最小可見區域寬度。 |
| monochrome | 定義在一個單色框架緩沖區中每像素包含的單色原件個數。如果不是單色設備，則值等于0 |
| orientation | 定義輸出設備中的頁面可見區域高度是否大于或等于寬度。 |
| resolution | 定義設備的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定義電視類設備的掃描工序。 |
| width | 定義輸出設備中的頁面可見區域寬度。 |
經驗介紹：我們在設置媒體響應的條件時候，通常使用的是 max-width、min-width、max-height、min-height，這里面有一個比較繞人的地方：
min 代表最小也就是說滿足我們設置條件的最小值是多少，比它大的都會滿足。
max 則代表的是最大值，比它小的都會滿足。
4. 兼容性
| IE | Edge | Firefox | Chrome | Safari | Opera | ios | android |
|---|---|---|---|---|---|---|---|
| 9+ | 12+ | 3.5 | 21 | 4.0 | 9 | 7+ | 4.4 |
5. 實例
- 當瀏覽器寬度小于 400px 時候背景色設紅色，大于 400px 時候背景色設白色。
@media screen and (max-width:400px){
html,body{
background:red;
}
}
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@media screen and (max-width:400px){
html,body{
background:red;
}
}
</style>
<body>
</body>
</html>
- 使用 only 當瀏覽器寬度小于 600px 時候背景色設紅色，大于 600px 時候背景色設白色。
@media only screen and (max-width:600px){
html,body{
background:red;
}
}
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@media only screen and (max-width:600px){
html,body{
background:red;
}
}
</style>
<body>
</body>
</html>
- 使用多個 and 來設置屏幕背景色。
@media only screen and (min-width:600px) and ( max-width:800px){
html,body{
background:red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@media only screen and (min-width:600px) and ( max-width:800px){
html,body{
background:red;
}
}
</style>
<body>
</body>
</html>
說明：這段代碼的意思是當瀏覽器可視區域大于 600px 小于 800px 背景色為紅色。
6. 小結
在工作中媒體查詢不只是用來限定 css 文件中使用哪組樣式，也可以直接作用在 link 標簽上，讓頁面直接選擇什么樣的 css 文件。
例如：
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
說明：@media 變成了標簽屬性 media ,上面的意思就是用來區分移動設備是橫向還是縱向的。
2025 imooc.com All Rights Reserved |