HTML style 標簽參考手冊HTML <style> 標簽

media 屬性用來指定設置的CSS樣式或外部樣式文件應用到目標媒介。

針對兩種不同媒介類型(屏幕和打印)的兩個不同的樣式表:

<style type="text/css" media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;} </style>


瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流瀏覽器都支持 media 屬性。


定義和用法

media 屬性規定目前資源是為何種媒介/設備優化的。

該屬性大多用在為不同媒介類型規定不同樣式的 CSS 樣式表。

提示:該屬性可以接受多個值。如果需要在一個 style 元素中定義一個以上的媒介類型,請使用逗號來分隔要使用的媒介類型,例如:<style type="text/css" media="screen,projection">。


HTML 4.01 與 HTML5之間的差異

無。


語法

<style media="value">

可能的運算符

描述
and規定 AND 操作符。
not規定 NOT 操作符。
,規定 OR 操作符。

設備

描述
all默認。適應所有設備。
aural語音合成器。
braille盲人用點字法反饋設備。
handheld手持設備(小屏幕、有限的帶寬)。
projection放映機。
print打印預覽模式 / 打印頁。
screen計算機屏幕(默認值)。
tty電傳打字機以及使用等寬字符網格的類似媒介。
tv電視類型設備(低分辨率、有限的屏幕翻滾能力)。

描述
width

規定目標顯示區域的寬度。

可使用 "min-" 和 "max-" 前綴。

例子:media="screen and (min-width:500px)"

height

規定目標顯示區域的高度。

可使用 "min-" 和 "max-" 前綴。

例子:media="screen and (max-height:700px)"

device-width

規定目標顯示器/紙張的寬度。

可使用 "min-" 和 "max-" 前綴。

例子:media="screen and (device-width:500px)"

device-height

規定目標顯示器/紙張的高度。

可使用 "min-" 和 "max-" 前綴。

例子:media="screen and (device-height:500px)"

orientation

規定目標顯示器/紙張的方向。

可能的值:"portrait" or "landscape"

例子:media="all and (orientation: landscape)"

aspect-ratio

規定目標顯示區域的寬度/高度比

可使用 "min-" 和 "max-" 前綴。

例子:media="screen and (aspect-ratio:16/9)"

device-aspect-ratio

規定目標顯示器/紙張的 device-width/device-height 比率

可使用 "min-" 和 "max-" 前綴。

例子:media="screen and (aspect-ratio:16/9)"

color

規定目標顯示器的 bits/color

可使用 "min-" 和 "max-" 前綴。

例子:media="screen and (color:3)"

color-index

規定目標顯示器可以處理的顏色數。

可使用 "min-" 和 "max-" 前綴。

例子:media="screen and (min-color-index:256)"

monochrome

規定單色幀緩沖中的 bits/pixel。

可使用 "min-" 和 "max-" 前綴。

例子:media="screen and (monochrome:2)"

resolution

規定目標顯示器/紙張的像素密度 (dpi 或 dpcm)。

可使用 "min-" 和 "max-" 前綴。

例子:media="print and (resolution:300dpi)"

scan

規定 tv 顯示器的掃描方式。

可能的值:"progressive" 和 "interlace"。

例子:media="tv and (scan:interlace)"

grid

規定輸出設備是否是網格或位圖。

可能的值:"1" 為網格,否則為 "0"。

例子:media="handheld and (grid:1)"



HTML style 標簽參考手冊HTML <style> 標簽