CSS3 的媒介(media)查詢
經典真題
- 如何使用媒體查詢實現視口寬度大于 320px 小于 640px 時 div 元素寬度變成 30%
媒體查詢
媒體查詢英文全稱 Media Query，顧名思義就是會查詢用戶所使用的媒體或者媒介。
在現在，網頁的瀏覽終端是越來越多了。用戶可以通過不同的終端來瀏覽網頁，例如：PC，平板電腦，手機，電視等。盡管我們無法保證一個網站在不同屏幕尺寸和不同設備上看起來一模一樣，但是至少要讓我們的Web頁面能適配用戶的終端。
在 CSS3 中的 Media Query （媒體查詢）模塊就是用來讓一個頁面適應不同的終端的。
Media Type 設備類型
首先我們來認識一下 CSS 中所支持的媒體類型。
在 CSS2 中常碰到的就是 all（全部）、screen（屏幕）和 print（頁面打印或打印預覽模式）。然而媒體的類型其實遠不止這 3 種。
在 W3C 中共列出了 10 種媒體類型，如下表所示：
| 值 | 設備類型 |
|---|---|
| All | 所有設備 |
| Braille | 盲人用點字法觸覺回饋設備 |
| Embossed | 盲文打印機 |
| Handheld | 便攜設備 |
| 打印用紙或打印預覽視圖 | |
| Projection | 各種投影設備 |
| Screen | 電腦顯示器 |
| Speech | 語音或音頻合成器 |
| Tv | 電視機類型設備 |
| Tty | 使用固定密度字母柵格的媒介，比如電傳打字機和終端 |
當然，雖然上面的表列出來了這么多，但是常用的也就是 all（全部）、screen（屏幕）和 print（頁面打印或打印預覽模式）這三種媒體類型。
媒體類型引用方法
引用媒體類型的方法有和很多，常見的媒體類型引用方法有：link 標簽、xml 方式、@import 和 CSS3 新增的 @media。
- link 方法
link 方法引入媒體類型其實就是在 link 標簽引用樣式的時候，通過 link 標簽中的 media 屬性來指定不同的媒體類型，如下：
<link rel="stylesheet" href="index.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
- xml 方式
xml 方式和 link 方式比較相似，也是通過 media 屬性來指定，如下：
<? xml-stylesheet rel="stylesheet" media="screen" href="style.css" ?>
- @import
@import 引入媒體類型主要有兩種方式，一種是在 CSS 樣式表中通過 @import 調用另一個樣式文件，另外一種是在 style 標簽中引入。
注意：IE6 和 IE7 中不支持該方式
在樣式文件中引入媒體類型：
@import url('./index.css') screen
在 style 標簽中引入媒體類型：
<style>@import url('./index.css') screen
</style>
- @meida 的方式
@media 是 CSS3 中新引進的一個特性，稱為媒體查詢。@media 引入媒體也有兩種方式，如下：
在樣式文件中引入媒體類型：
@media screen{/* 具體樣式 */
}
在 style 標簽中引入媒體類型：
<style>@media screen{/* 具體樣式 */}
</style>
雖然上面介紹了 4 種引入方式，但是最常見的就是第 1 種和第 4 種。
媒體查詢具體語法
接下來我們來看一下媒體查詢的具體語法。
這里我們可以將 Media Query 看成一個公式：
Media Type（判斷條件）+ CSS（符合條件的樣式規則）
這里舉例如下：
link 的方式
<link rel="stylesheet" media="screen and (max-width:600px)" href="style.css" />
@media 的方式
@meida screen and (max-width:600px){/* 具體樣式 */
}
上面的兩個例子中都是使用 width 來進行的樣式判斷，但是實際上還有很多特性都可以被用來當作樣式判斷的條件。
具體如下表：
有了 Media Query，我們能在不同的條件下使用不同的樣式，使頁面在不同的終端設備下達到不同的渲染效果。
這里有一個具體的公式如下：
@media 媒體類型 and (媒體特性) {/* 具體樣式 */
}
來看幾個具體示例。
- 最大寬度 max-width
該特性是指媒體類型小于或等于指定寬度時，樣式生效，例如：
@media screen and (max-width:480px) {/* 具體樣式 */
}
當屏幕寬度小于或等于 480px 時，樣式生效
- 最小寬度 min-width
該特性和上面相反，及媒體類型大于或等于指定寬度時，樣式生效，例如：
@media screen and (min-width:480px) {/* 具體樣式 */
}
當屏幕寬度大于或等于 480px 時，樣式生效
- 多個媒體特性混合使用
當需要多個媒體特性時，使用 and 關鍵字將媒體特性結合在一起，例如：
@media screen and (min-width:480px) and (max-width:900px){/* 具體樣式 */
}
當屏幕大于等于 480px 并且小于等于 900px 時，樣式生效。
- 設備屏幕的輸出寬度 Device Width
在智能設備上，例如 iphone、ipad 等，可以通過 min-device-width 和 max-device-width 來設置媒體特性，例如：
@media screen and (max-device-height:480px) {/* 具體樣式 */
}
在智能設備上，當屏幕小于等于 480px 時樣式生效
- not 關鍵字
not 關鍵詞可以用來排除某種制定的媒體特性，示例如下：
@media not print and (max-width:900px) {/* 具體樣式 */
}
樣式代碼將被用于除了打印設備和屏幕寬度小于或等于 900px 的所有設備中。
- 未指明 Media Type
如果在媒體查詢中沒有明確的指定 Media Type，那么其默認值為 all
@media (max-width: 900px){/* 具體樣式 */
}
上面的樣式適用于屏幕尺寸小于或等于 900px 的所有設備。
更多關于媒體查詢的內容可以參閱 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries
真題解答
- 如何使用媒體查詢實現視口寬度大于 320px 小于 640px 時 div 元素寬度變成 30%
參考答案：
@media screen and (min-width: 320px) and (max-width: 640px){div{width: 30%;} }
-EOF-
