HTML <link> media 属性

HTML <link> タグ

定義と使用方法

media 属性はターゲットリソースがどのメディア/デバイスに最適化されているかを指定します。

media 属性はリンクされたドキュメントがどのデバイスで表示されるかを指定します。

この属性は主にCSSスタイルシートと一緒に使用され、異なるメディアタイプに対して異なるスタイルを指定します。

media 属性は複数の値を受け入れます。

例

二つの異なるスタイルシートが二つの異なるメディアタイプ（スクリーンおよび印刷）用に用意されています：

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

親自試試

語法

<link media="value>

可能的運算符

運算符 描述
and 規定 AND 運算符。
not 規定 NOT 運算符。
, 規定 OR 運算符。

設備

設備 描述
all 默認。用於所有媒體類型設備。
print 用於打印預覽模式/打印頁面。
screen 用於電腦屏幕、平板電腦、智能手机等。
speech 用於朗讀頁面的屏幕閱讀器。
aural 已棄用。聲音合成器。
braille 已棄用。盲文反饋設備。
handheld 已棄用。手持設備（小屏幕、有限帶寬）。
projection 已棄用。投影儀。
tty 已棄用。使用固定間距字符網格的电传打字机和類似媒體。
tv 已棄用。電視類型設備（解析度低、滾動能力有限）。

值

值 描述
aspect-ratio

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

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

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

規定目標顯示器的每種顏色的位數。

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

例：media="screen and (color:3)"
color-index

規定目標顯示器能夠處理的顏色數。

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

例：media="screen and (min-color-index:256)"
device-aspect-ratio 已棄用。規定目標顯示器/紙張的 device-width/device-height 比率。
device-width 已棄用。規定目標顯示器/紙張的寬度。
device-height 已棄用。規定目標顯示器/紙張的高度。
grid

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

可能的值："1" 代表網格，"0" 是其他。

例：media="handheld and (grid:1)"
height

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

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

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

規定在單色帧緩冲中的每像素比特。

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

例：media="screen and (monochrome:2)"
orientation

规定目标显示器/纸张的方向。

可能的值："portrait" 或 "landscape"

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

规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。

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

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

规定 tv 显示器的扫描方法。

可能的值是："progressive" 和 "interlace"。

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

规定目标显示区域的宽度。

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

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

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

HTML <link> タグ