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> 标签