原文位址： http://www.work100.net/training/monolithic-frameworks-bootstrap-media.html 更多教程： 光束雲 - 免費課程
媒體查詢
請參照如上
章節導航
進行閱讀
1.用法
@media
媒體查詢能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果。
2.浏覽器支援
表格中的數字表示支援 @media 規則的第一個浏覽器的版本号
| 浏覽器 | 支援 |
|---|---|
| Chrome | 21 |
| IE | 9 |
| Firefox | 3.5 |
| Safari | |
| Opera |
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
- orientation（不支援
min/max
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://github.com/work100-net/training-stage2/tree/master/hello-bootstrap
- https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap
上一篇：
網格系統下一篇：
表格如果對課程内容感興趣，可以掃碼關注我們的或公衆号
，及時關注我們的課程更新QQ群
