HTML media 屬性
定義和用法
media
屬性指定連結文件針對何種媒體/裝置進行了最佳化。
此屬性用於指定目標 URL 是為特殊裝置(如 iPhone)、語音或列印媒體設計的。
此屬性可接受多個值。
適用範圍
media
屬性可用於以下元素
元素 | Attribute |
---|---|
<a> | media |
<area> | media |
<link> | media |
<source> | media |
<style> | media |
示例
A 示例
帶有 media 屬性的連結
<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
開啟列印的 media 屬性頁面。</a>
自己動手試一試 »
Area 示例
帶有可點選區域的影像對映
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm" media="screen and (min-color-index:256)">
</map>
自己動手試一試 »
Link 示例
兩種不同媒體型別(螢幕和列印)的兩種不同樣式表
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
自己動手試一試 »
Source 示例
media 屬性的使用
<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">
自己動手試一試 »
樣式示例
指定用於列印的樣式
<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
自己動手試一試 »
瀏覽器支援
media
屬性對每個元素具有以下瀏覽器支援
元素 | |||||
---|---|---|---|---|---|
a | 是 | 是 | 是 | 是 | 是 |
area | 是 | 是 | 是 | 是 | 是 |
連結 | 是 | 是 | 是 | 是 | 是 |
source | 不支援 | 不支援 | 不支援 | 不支援 | 不支援 |
樣式 | 是 | 是 | 是 | 是 | 是 |