小編給大家分享一下CSS中媒體類型的使用方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司主營豐寧網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,App定制開發(fā),豐寧h5小程序定制開發(fā)搭建,豐寧網(wǎng)站營銷推廣歡迎豐寧等地區(qū)企業(yè)咨詢

根據(jù)Web網(wǎng)站的不同，網(wǎng)頁的錯誤會以非預(yù)期的形式出現(xiàn)，例如打印時的布局折疊，但在媒體類型中，可以設(shè)置它以避免它，這意味著您可以創(chuàng)建用于打印的頁面，輸出到投影儀的頁面等。

如何使用CSS媒體類型？

媒體類型可以用兩種方式編寫。

第一種方式

第二種方式

@media screen{
  /*screen的內(nèi)容*/
}

第一個使用根據(jù)媒體類型更改應(yīng)用的CSS。

第二種是在CSS中為每種媒體類型編寫的設(shè)置

由于有時大量的CSS代碼時，有一些變化時很難更改，所以建議使用第一種方式，但這次我們以第二種方式為例介紹CSS媒體類型。

我們先來簡單看一下CSS中常用的幾種媒體類型

screen（屏幕）

print（打印）

tv（電視）

projection（投影儀）

all（全部）

當(dāng)使用兩個媒體類型時可以用逗號分隔開，下面我們來看具體的示例

代碼如下

HTML代碼

  
    
    
    
  
  
    
Sample
    
根據(jù)媒體的不同，背景顏色會改變
    
screen : 平常顯示 : #d9534f（紅色）
    
print : 打印時顯示: #5bc0de（藍(lán)色）
  

CSS代碼

sample.css

@media all{
  p{
    color:#000000;
  }
}
@media print{
  body{
    color: #5bc0de;
  }
}
@media screen{
  body{
    color: #d9534f;
  }
}

執(zhí)行上述代碼在瀏覽器頁面上顯示如下效果

Sample為紅色

當(dāng)進(jìn)行打印預(yù)覽時，瀏覽器上顯示如下所示效果

Sample變?yōu)樗{(lán)色

看完了這篇文章，相信你對CSS中媒體類型的使用方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！