HTML <style> media 屬性

HTML <style> 標簽

定義和用法

media 屬性用于規定 CSS 樣式所針對（優化）的媒體/設備。

該屬性用于規定樣式適用于特定設備（如iPhone）、語音或打印媒體。

提示：該屬性可以接受多個值。

實例

例子 1

規定用于打印的樣式：

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

親自試一試

例子 2

使用 media 屬性的 width 特性區分兩組樣式：

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

親自試一試

注釋：瀏覽器窗口寬度小于 500 像素時使用的是第一組樣式，窗口寬度大于 500 像素時使用的是第二組。

語法

<style media="value">

可能的運算符

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

樣式的使用條件可以設計得非常細致。首先要明確的是所針對的設備類型。下表總結了所有符合規定的值：

設備

設備 描述
all 默認。適用于所有設備。
aural 語音合成器。
braille 盲文反饋設備。
handheld 手持設備（小屏幕、有限帶寬）。
projection 投影儀。
print 打印預覽模式/打印頁面。
screen 計算機屏幕。
tty 使用固定間距字符網格的電傳打字機和類似媒體。
tv 電視類設備（低分辨率，滾動能力有限）。

瀏覽器負責解釋設備歸類。有些設備類型（比如 screen 和 print）在各種瀏覽器上的解釋比較一致，但另一些設備（比如 handheld）的解釋可能就隨意多了。因此核實一下所針對的瀏覽器對特定設備的解釋與自己是否一致非常必要。

特性

特性 描述
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 或 landscape。

該特性沒有限定詞。

例如：media="all and (orientation: landscape)"
aspect-ratio

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

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

例如：media="screen and (aspect-ratio:16/9)"
device-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)"
monochrome

規定單色幀緩沖區中每像素的位數。

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

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

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

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

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

規定電視的掃描模式。

支持的值有 progressive 和 interlace。

該特性沒有限定詞。

例如：media="tv and (scan:interlace)"
grid

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

網格型設備使用固定的網格顯示內容，例如基于字符的終端和單行顯示的尋呼機。

支持的值有 0 和 1（1 代表網格型設備）。

該特性沒有限定詞。

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

width 等特性通常會跟限定詞 min 和 max 配合使用。不用這些限定詞，讓樣式的使用取決于非常精確的窗口尺寸也行，但是加上限定詞會讓條件變得更加靈活。

上表列出并介紹了可用的各種特性。若非特別點明，這些特性都可以用 min- 和 max- 修飾，構成閾值而不是精確值。

與規定設備的情況類似，這些特性也是由瀏覽器負責解釋。關于瀏覽器認識哪些特性以及認定這些特性什么時候存在并且可以使用，其具體情況紛紜繁雜。如果要根據這些特性應用樣式，請務必進行全面的測試，并且準備好預期特性不可用時改用的備用樣式。

瀏覽器支持

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

HTML <style> 標簽