武林網(www.49028c.com)文章簡介：CSS2.1規范最重要的新特性之一就是引入了media types,下邊是media types的10個值，常用的并不多。

CSS2.1規范最重要的新特性之一就是引入了media types,下邊是media types的10個值，常用的并不多。當沒有media標簽時，默認為media=”all”:

all– 用于所有設備類型
aural– 用于語音和音樂合成器
braille– 用于觸覺反饋設備
embossed– 用于凸點字符（盲文）印刷設備
handheld– 用于小型或手提設備
print– 用于打印機
projection– 用于投影圖像，如幻燈片
screen– 用于計算機顯示器
tty– 用于使用固定間距字符格的設備。如電傳打字機和終端
tv– 用于電視類設備

示例：

 @media print {
   body { font-size: 10pt }
 }
 @media screen {
   body { font-size: 13px }
 }
 @media screen, print {
   body { line-height: 1.2 }
 }

隨著移動終端的發展，screen重要性逐漸顯現出來。為了更好的支持移動終端設備，css3加強了media types，引入了Media Queries，其作用就是允許使用。

css表達式用以確定媒體的情況，如查詢設備的屏幕尺寸顏色等信息，借此讓網頁更好的適應不同的屏幕。

示例：

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }
@media all and (color) { … }
@media all and (min-color: 1) { … }

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="retina.css">

@media screen and (min-width:1280px){
    body{ ...  }
}
   
@media screen and (min-width: 800px) and (max-width: 1280px) {
    body{ ...  }
}
   
@media screen and (max-width: 800px) {
    body{ ... }
}

應用案例：

解決icon在不同分辨率屏幕下顯示效果問題。解決辦法有多種，原理都是采用根據分辨率不同采用不同大小圖片的辦法。

這里用Media Queries可以輕松實現不同屏幕兼容：

/* 普通屏幕 */
.icon { 
    width:16px;
    height:16px;
    background:url(images/icon.png) no-repeat; 
}
/* Retina Screen 用大圖縮小適配 
   background-size要寫在background-image后面,否則部分瀏覽器會失效
*/
@media only screen and (-webkit-min-device-pixel-ratio:2) {
 .icon {
     background:url("images/icon2.png") no-repeat;
     -webkit-background-size:16px 16px;
     background-size:16px 16px;
 } 
}