HTML - media 属性

HTML 的 **media** 属性用于指定链接资源的设计目标媒体的提示。

通过使用 media 属性，您可以对不同的设备、屏幕尺寸或条件应用不同的样式。其值为媒体查询，如果缺少 media 属性，则默认为所有。

如果其父元素为 **<picture>** 元素，则 **<source>** 允许使用 media 属性，但如果其父元素为 **<audio>** 或 **<video>** 元素，则不允许使用。

语法

<tag media = "value"></tag>

media 属性的值可以是。

media = "all"（适用于所有设备）
media = "screen"（主要用于屏幕）
media = "speech"（用于屏幕阅读器）
media = "print"（用于打印预览模式或打印文档）

如果要为链接资源提及多个提示，可以使用布尔运算符，关键字“and”指定 AND 运算符，关键字，（逗号）指定 OR 运算符，关键字“not”指定 NOT 运算符。

应用于

以下列出的元素允许使用 HTML media 属性

元素	描述
<a>	HTML <a> 标签用于在文档中附加超链接。
<area>	HTML <area> 标签指定图像的区域，映射可以被点击或是有超链接链接到的活动区域。
<link>	HTML <link> 标签指定当前文档与外部资源之间的关系。
<source>	HTML <source> 表示标签中既没有结束标签也没有任何内容。
<style>	HTML <style> 标签用于在 HTML 文件中引入 CSS 样式。

HTML media 属性示例

以下示例将说明 HTML media 属性，在哪里以及如何使用此属性！

定义 media 属性

在此示例中，我们使用 'link' 元素的 media 属性来为不同的屏幕尺寸应用不同的 CSS 样式表。对于屏幕宽度不超过 599 px，使用样式表 'mobile.css'，对于屏幕宽度 600 px 及以上，使用 'style.css'。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>
      Media Attribute Example
   </title>
   <link rel="stylesheet" 
         href="style.css" 
         media="screen and (min-width: 600px)">
   <link rel="stylesheet" 
         href="mobile.css" 
         media="screen and (max-width: 599px)">
</head>
<body>
      <h1>Hello, World!</h1>
      <p>
         This is an example of using 
         the media attribute.
      </p>
</body>
</html>

基于屏幕尺寸的特定样式

在此示例中，我们在 style 标签中使用了 media 属性。在输出中，对于宽度至少为 600 像素的屏幕，body 的背景颜色将为浅蓝色；对于宽度小于 600 像素的屏幕，body 的背景颜色将为浅珊瑚色。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>
      Media Attribute Example
   </title>

   <style media="screen and (min-width: 600px)">
      body {
         background-color: lightblue;
      }
   </style>
   <style media="screen and (max-width: 599px)">
      body {
         background-color: lightcoral;
      }
   </style>
</head>

<body>
      <h1>Hello, World!</h1>
      <p>
         This is an example of using the media 
         attribute with style elements.
      </p>
</body>

</html>

带有 media 属性的链接

在此示例中，media 属性与锚点标签一起使用，以根据媒体条件有条件地加载资源的备用版本。这里我们使用锚点标签的 media 属性来加载同一页面的可打印版本和移动友好版本。

<!DOCTYPE html>
<html lang="en">

<head>
      <title>
         Media Attribute with Anchor Tag 
      </title>
</head>

<body>
   <h1>Hello, World!</h1>
   <p>
      This is an example of using the media 
      attribute with an anchor tag.
   </p>

   <a href="/html/index.htm" 
      media="print">
         Printable Version
   </a>
   <br>
   <a href="/html/index.htm" 
      media="screen and (max-width: 599px)">
         Mobile Version
   </a>
</body>

</html>

带有可点击区域的 media 属性

这里我们在图像地图中的区域标签中使用了 media 属性，以针对不同的媒体类型或条件提供备用资源。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>
      Media Attribute with Area Tag
   </title>
</head>

<body>
   <h1>Image Map Example</h1>
   <p>
      Hover over the regions of the image to see 
      different links based on media conditions.
   </p>

   <img src="/html/images/media-attribute.jpg" 
        usemap="#example-map" 
        alt="Example Image Map">
   
   <map name="example-map">
      <!-- Link for general screens -->
      <area shape="rect" 
            coords="0,0,182,272" 
            href="/html/index.htm" 
            alt="Default Link">
      
      <!-- Link for print media -->
      <area shape="rect" 
            coords="180,0,373,141" 
            href="/html/index.htm" 
            alt="Print Link" 
            media="print">
      
      <!-- Link for small screens -->
      <area shape="rect" 
            coords="180,145,372,270" 
            href="/html/index.htm" 
            alt="Mobile Link" 
            media="screen and (max-width: 599px)">
   </map>
</body>

</html>

带有 Source 标签的 media 属性

在此示例中，我们使用 source 标签的 media 属性来根据屏幕宽度更改图像。它不再支持 source 元素。

<!DOCTYPE html>
<html lang="en">
      
<head>
   <title>
      Media Attribute with Picture Element
   </title>
</head>

<body>
   <h1>Responsive Image Example</h1>
   <p>
      The image changes based on the screen width.
   </p>
   
   <picture>
      <!-- 
      Image for screens that are at least 800 pixels wide 
      -->
      <source srcset="/html/images/html.jpg" 
              media="(min-width: 600px)">

      <!-- 
      Image for screens that are less than 800 pixels wide 
      -->
      <source srcset="/css/images/css.jpg" 
              media="(max-width: 599px)">

      <!--
      Image for browsers that do not support the <picture> element 
      -->
      <img src="/html/images/html.jpg" 
              alt="Example Image">
   </picture>
</body>

</html>

支持的浏览器

属性
media	是	是	是	是	是

html_attributes_reference.htm

打印页面

上一个

下一个