在网页开发中，我们经常需要根据不同的设备或媒体类型来设置不同的样式。这时就可以使用 HTML 中的 <style> 标签配合 media 属性来实现。<style> 标签用于定义文档的样式信息，而 media 属性则用于指定样式规则应用的媒体类型。
语法
<style> 标签的基本语法如下：
<style media="media_type"> /* 样式规则 */ </style>
其中，media_type 可以是以下几种媒体类型之一：
all：所有设备print：打印设备screen：屏幕设备speech：语音合成器
除了以上几种常见的媒体类型外，还可以根据需要自定义其他媒体类型。
示例
1. 在屏幕设备上显示不同的样式
// www.javascriptcn.com code example
<style media="screen">
body {
background-color: lightblue;
color: black;
}
</style>
<style media="print">
body {
background-color: white;
color: black;
}
</style>在上面的示例中，我们定义了两个 <style> 标签，分别用于屏幕设备和打印设备。在屏幕设备上，背景色为浅蓝色，文字颜色为黑色；而在打印设备上，背景色为白色，文字颜色为黑色。
2. 自定义媒体类型
<style media="custom">
body {
font-family: Arial, sans-serif;
}
</style>在这个示例中，我们定义了一个自定义的媒体类型 custom，并为其设置了字体样式。这样，在需要特定样式的地方，就可以使用这个自定义的媒体类型来应用样式。
总结
通过 <style> 标签的 media 属性，我们可以根据不同的媒体类型来设置不同的样式，从而实现更好的页面展示效果。在实际开发中，灵活运用这一特性可以让我们更好地适配各种设备和媒体类型，提供更好的用户体验。