iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 11
3

今天來介紹 CSS 的 media type。

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看。

「重新認識 CSS」系列文章發文於:

如果要將同一份文件應用在不同的 media 上呈現,就可以使用 media type 來指定適用的 media。

有些 CSS 屬性只在某些 media 上適用,例如:page-break-before 屬性僅適用於 paged media,而 visual 是 media group。

不同 media type 的 style sheet 可以對同一個元素的同一個屬性進行設定,但是各屬性有不同的設定值。例如:font-size 在電腦螢幕上通常都會比在紙上還要大,所以可在不同 media type 分別設定不同的字體大小。

指定與 media 相關的 style sheet

下面有幾種方法可以為 style sheet 指定 media:

  1. 使用 @media 規則指定目標 media:
@media screen {
  body { font-size: 10pt; }
}
@media print {
  body { font-size: 10pt; }
}
  1. 使用 @import 規則指定目標 media:
@import url("style.css") screen;
@import url("print.css") print;
  1. 在 HTML 要引入 style sheet 時,在 link 元素上的 media 屬性指定外部 style sheet 的目標 media:
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
    <link rel="stylesheet" media="screen" href="./style.css">
    <link rel="stylesheet" media="print" href="./print.css">
  </head>
  <body>
    <h1>Title</h1>
  </body>
</html>

@media 規則

可在同一個 style sheet 內,為各種 media 使用 style sheet 規則:

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

media type

常用的 media type:

  • all:適用於所有裝置
  • screen:主要用於彩色電腦螢幕 (包含手機和平版)
  • speech:適用於語音合成器 (speech synthesizer)、語音朗讀裝置
  • print:適用於 paged material 和在列印預覽模式下在螢幕上查看的文件,例如:用瀏覽器的「列印預覽」模式察看文件

print 的 paged media 部份可參閱 CSS 2.2 - paged media

CSS 2.1 定義了其他幾種比較少見的 media type:brailleembossedhandheldprojectionttytvaural,但這些 media type 在 Media Queries Level 4 已被棄用,所以不建議使用這些 media type。

當初在決定有哪些 media type 的時候,不同的 media type 有很大的區別,例如:screenhandheld,分別為電腦螢幕和手持裝置 (例如:PDA),但後來這兩個的界線從愈來愈模糊,變成沒有界線。

資料來源:


上一篇
重新認識 CSS - Cascading & Specificity
下一篇
重新認識 CSS - Media query
系列文
重新認識 CSS30

尚未有邦友留言

立即登入留言