HTML - media 属性

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

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

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

语法


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

媒体属性的值可以是。

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 属性

在此示例中，我们将 media 属性与 'link' 元素一起使用，以针对不同的屏幕尺寸应用不同的 CSS 样式表。对于屏幕宽度不超过 599 像素的样式表，使用“mobile.css”，对于屏幕宽度为 600 像素及以上的样式，使用“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>

基于屏幕尺寸的特定样式

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


<!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 属性与锚标记一起使用，以根据媒体条件有条件地加载资源的备用版本。在这里，我们使用了锚标签的媒体属性来加载同一页面的可打印版本和移动友好版本。


<!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>

具有 Cliakable Area 的 Media 属性

在这里，我们在图像映射中使用了 media 属性和 area 标签，为不同的媒体类型或条件提供备用资源。


<!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 属性

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


<!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>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

打印本页