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> 標簽