CSS中媒體類(lèi)型的使用方法

發(fā)布時(shí)間：2020-09-26 10:43:04 來(lái)源：億速云閱讀：152 作者：小新欄目：web開(kāi)發(fā)

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

CSS中媒體類(lèi)型的使用方法

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

如何使用CSS媒體類(lèi)型？

媒體類(lèi)型可以用兩種方式編寫(xiě)。

第一種方式

<link rel="stylesheet" href="sample.css" type="text/css" media="screen">

第二種方式

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

第一個(gè)使用<link>根據(jù)媒體類(lèi)型更改應(yīng)用的CSS。

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

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

我們先來(lái)簡(jiǎn)單看一下CSS中常用的幾種媒體類(lèi)型

screen（屏幕）

print（打?。?/p>

tv（電視）

projection（投影儀）

all（全部）

當(dāng)使用兩個(gè)媒體類(lèi)型時(shí)可以用逗號(hào)分隔開(kāi)，下面我們來(lái)看具體的示例

代碼如下

HTML代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>媒體類(lèi)型</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <h2>Sample</h2>
    <p>根據(jù)媒體的不同，背景顏色會(huì)改變</p>
    <p>screen : 平常顯示 : #d9534f（紅色）</p>
    <p>print : 打印時(shí)顯示: #5bc0de（藍(lán)色）</p>
  </body>
</html>

CSS代碼

sample.css

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

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

Sample為紅色

CSS中媒體類(lèi)型的使用方法

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

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

CSS中媒體類(lèi)型的使用方法

看完了這篇文章，相信你對(duì)CSS中媒體類(lèi)型的使用方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

CSS中媒體類(lèi)型的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽