首頁 > 文章 > web前端 > CSS的媒體類型怎麼使用

CSS的媒體類型怎麼使用

不言原創: 2018-12-07 17:07:063394瀏覽

今天的這篇文章將介紹關於CSS媒體類型的用法，媒體類型允許你指定的文件將以怎樣的形式在不同媒體呈現，下面我們就來看看具體的內容。

CSS的媒體類型怎麼使用

根據Web網站的不同，網頁的錯誤會以非預期的形式出現，例如列印時的佈局折疊，但在媒體類型中，可以設定它以避免它，這意味著您可以建立用於列印的頁面，輸出到投影機的頁面等。

如何使用CSS媒體類型？

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

第一種方式

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

第二種方式

@media screen{
  /*screen的内容*/
}

第一個使用根據媒體類型更改應用的CSS。

第二種是在CSS中為每種媒體類型編寫的設定

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

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

#screen（螢幕）

print（列印）

tv（電視）

projection（投影機）

all（全部）

當使用兩個媒體類型時可以用逗號分隔開，下面我們來看具體的範例

程式碼如下

HTML程式碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS的媒體類型怎麼使用</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <h1>Sample</h1>
    <p>根据媒体的不同，背景颜色会改变</p>
    <p>screen : 平常显示 : #d9534f（红色）</p>
    <p>print : 打印时显示: #5bc0de（蓝色）</p>
  </body>
</html>

CSS程式碼

##sample.css

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

執行上述程式碼在瀏覽器頁面上顯示如下效果

#Sample為紅色

CSS的媒體類型怎麼使用

當進行列印預覽時，瀏覽器上顯示如下所示效果

Sample變成藍色

CSS的媒體類型怎麼使用

以上是CSS的媒體類型怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html print

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS中hack是什麼意思下一篇：CSS中hack是什麼意思

看更多