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