原文地址：http://www.work100.net/training/monolithic-frameworks-bootstrap-media.html
更多教程：光束雲 - 免費課程
媒體查詢
| 序號 | 文內章節 | 視頻 |
|---|---|---|
| 1 | 用法 | - |
| 2 | 瀏覽器支持 | - |
| 3 | 媒體類型 | - |
| 4 | 媒體特性 | - |
| 5 | 使用媒體查詢 | - |
請參照如上章節導航進行閱讀
1.用法
@media 媒體查詢能在不同的條件下使用不同的樣式，使頁面在不同在終端設備下達到不同的渲染效果。
2.瀏覽器支持
表格中的數字表示支持 @media 規則的第一個瀏覽器的版本號
| 瀏覽器 | 支持 @media 的最低版本 |
|---|---|
| Chrome | 21 |
| IE | 9 |
| Firefox | 3.5 |
| Safari | 4.0 |
| Opera | 9 |
3.媒體類型
媒體類型在 CSS2 中是一個常見屬性，可以通過媒體類型對不同設備指定不同樣式。
- ALL：所有設備
- Braille：盲人用點子法觸覺回饋設備
- Embossed：盲文打印機
- Handheld：便攜設備
- Print：打印用紙或打印預覽視圖
- Projection：各種投影設備
- Screen：電腦顯示器
- Speech：語音或音頻合成器
- Tv：電視機類型設備
- Tty：使用固定密度字母柵格的媒介，比如電傳打字機和終端
Screen、All、Print 爲最常見的三種媒體類型。
4.媒體特性
媒體查詢中的大部分接受 min/max 前綴，用來表達其邏輯關係，表示應用大於等於或小於等於某個值的情況。沒有特殊說明都支持 min/max。
- width：Length 渲染界面的寬度
- height：Length 渲染界面的高度
- color：整數，表示色彩的字節數
- color-index：整數， 色彩表中的色彩數
- device-aspct-ratio：整數/整數，寬高比例
- device-height：Length 設備屏幕的輸出高度
- device-width：Length 設備屏幕的輸出寬度
- grid（不支持
min/max前綴）：整數，是否基於柵格的設備 - monochrome：整數，單色幀緩衝器中每像素字節數
- resolution：分辨率（dpi/dpcm）分辨率
- scan（不支持
min/max前綴）：Progressive interlaced，Tv 媒體類型的掃描方式 - orientation（不支持
min/max前綴）：Portrait//landscape 橫屏或豎屏
5.使用媒體查詢
語法：@media 媒體類型 and (媒體特性) {你的樣式}
最大寬度
max-width 是媒體特性中最常用的一個特性，其意思是指媒體類型小於或等於指定的寬度時，樣式生效。如：
@media screen and (max-width:480px) {
.ads {
display:none;
}
}上面表示的是：當屏幕小於或等於 480px 時，頁面中包含類樣式 .ads 的元素都將被隱藏。
最小寬度
min-width 與 max-width 相反，指的是媒體類型大於或等於指定寬度時，樣式生效。
@media screen and (min-width: 900px) {
.wrapper {width: 980px;}
}上面表示的是：當屏幕大於或等於 900px 時，頁面中包含類樣式 .wrapper 元素的寬度爲 980px。
多個媒體特性的使用
媒體查詢可以使用關鍵詞 and 將多個媒體特性結合在一起。也就是說，一個媒體查詢中可以包含 0 到多個表達式，表達式又可以包含 0 到多個關鍵字，以及一種媒體類型。
當屏幕在 600px~900px 之間時，body 的背景色渲染爲 #F5F5F5 ，如下所示：
@media screen and (min-width:600px) and (max-width:900px) {
body {background-color:#F5F5F5;}
}源碼獲取
實例源碼已經託管到如下地址：
- <https://github.com/work100-net/training-stage2/tree/master/hello-bootstrap>
- <https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap>
上一篇：網格系統
下一篇：表格
如果對課程內容感興趣，可以掃碼關注我們的
公衆號或QQ羣，及時關注我們的課程更新
