使用HTML媒体属性来指定已优化耦合文档的媒体或设备。此属性指定目标URL是为iPhone,语音或打印媒体等特殊设备设计的。该属性可以接受多个值。
适用的:
- <a>
- HTML - <area> media属性用法及代码示例;
- HTML - <link> media属性用法及代码示例
- HTML - <source> media属性用法及代码示例
- HTML - <style> media属性用法及代码示例
例:HTML <a>媒体属性
<html>
<head>
<title>
HTML <a> href Attribute
</title>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>
HTML <a> href Attribute
</h2>
<a href="https://ide.geeksforgeeks.org/"
media="print and (resolution:300dpi)">
Click to open in the same tab
</a>
<br>
<a href="https://ide.geeksforgeeks.org/"
target="_blank"
media="print and (resolution:300dpi)">
Click to open in a different tab
</a>
</body>
</html>
输出:
例:HTML <source>媒体属性
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width:600px)"
srcset=
"https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28.png">
<source media="(min-width:400px)"
srcset=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190521140445/gfglogo2.png"
style="width:auto;">
</picture>
</body>
</html>
输出:更改浏览器大小。
支持的浏览器:下面列出了HTML媒体属性支持的浏览器:
- 谷歌浏览器
- IE浏览器
- Firefox
- 苹果Safari
- Opera
相关用法
- HTML <style> media属性用法及代码示例
- HTML <area> media属性用法及代码示例
- HTML <link> media属性用法及代码示例
- HTML <source> media属性用法及代码示例
- HTML <a> media属性用法及代码示例
- SVG media属性用法及代码示例
注:本文由纯净天空筛选整理自Vijay Sirra大神的英文原创作品 HTML | media attribute。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。