在css中我們使用media标簽來(lái)區分(fēn)調用哪個css樣式，比如使用media="print"來(lái)表示當執行(xíng)打印文檔時，使用print.css樣式。這(zhè)樣使得文檔更有得于打印，如将頁面寬度增寬、或屏蔽掉一些不(bù)需要(yào)打印的內(nèi)容。

<link href="styles/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/print.css" rel="stylesheet" type="text/css" media="print" /> 
<link href="main.css" rel="stylesheet" type="text/css" media="all'/>

下邊是(shì)media标簽的10個值，可(kě)見(jiàn)常用的并不(bù)多(duō)。當沒有media标簽時，默認爲media="all"。

all-- 用于所有設備類型 

aural-- 用于語音(yīn)和音(yīn)樂合成器 

braille-- 用于觸覺反饋設備 

embossed-- 用于凸點字符（盲文）印刷設備 

handheld-- 用于小(xiǎo)型或手提設備 

print-- 用于打印機 

projection-- 用于投影圖像，如幻燈片 

screen-- 用于計算機顯示器 

tty-- 用于使用固定間(jiān)距字符格的設備。如電(diàn)傳打字機和終端 

tv-- 用于電(diàn)視(shì)類設備

   在上邊引用css樣式時，我們引用了兩次。我們完全可(kě)以引用一個css樣式來(lái)達到我們的目的，這(zhè)樣也可(kě)以提高(gāo)css樣式加載速度,實現(xiàn)CSS代碼如下：

/* 所有media标簽 */
@media all{ 
 body{font:12px; width:100%;} 
}  
@media print{  
 body{font:14px; width:595px;}/* 用于打印時将寬度設置爲595px(A4) */  
}

以上media标簽是(shì)css中的标準語法，所有浏覽器都支持media标簽，但(dàn)下面的寫法出IE6\7\8 以爲的浏覽器都支持

CSS代碼

@media all and (min-width: 1001px){  
  #sidebar ul li a:after {  
    content:" (" attr(data-email) ")";  
    font-size:11px;  
    font-style:italic;  
    color: #666;  
  }  
}  
      
@media all and (max-width: 1000px) and (min-width: 700px){  
  #sidebar ul li a:before {  
    content: "Email: ";  
    font-style: italic;  
    color: #666;  
  }  
}  
      
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px){  
  #sidebar ul li a{  
    padding-left: 21px;  
    background: url(../images/email.png) left center no-repeat;  
  }  
}

html5    css3    media