media属性显示必须匹配的媒体查询才能应用样式表。只有<style>元素正在使用此属性。
用法:
<style media="media-query-list"> // Styling the element </style>
属性值:media属性接受上述和以下所述的值:
- media-query-list:该值包含一个媒体查询,该查询允许将样式表应用于元素。
以下示例说明了媒体属性的使用。
范例1:
<!DOCTYPE html>
<html>
<body>
<h1 style="margin-left:-8px;
font-size:25px; color:green;">
GeeksforGeeks
</h1>
<svg viewBox="0 10 1440 220"
xmlns="http://www.w3.org/2000/svg">
<!-- Styling rect element when screen
size is greater than 800px -->
<style>
rect {
fill:yellowgreen;
}
</style>
<!-- Styling rect element when screen
size is greater than 800px and
using media attribute-->
<style media="all and (min-width:800px)">
rect {
fill:green;
}
</style>
<!-- Defining rectangular shape SVG -->
<rect y="20" width="200" height="200" />
</svg>
</body>
</html>
输出:
范例2:
<!DOCTYPE html>
<html>
<body>
<h1 style="margin-left:-8px;
color:green; font-size:25px;">
GeeksforGeeks
</h1>
<svg viewBox="0 2 1440 220"
xmlns="http://www.w3.org/2000/svg">
<!-- Styling rect element when screen
size is greater than 800px -->
<style>
circle {
fill:yellowgreen;
}
</style>
<!-- Styling rect element when screen
size is greater than 800px and
using media attribute-->
<style media="all and (min-width:800px)">
circle {
fill:green;
}
</style>
<!-- Defining circular shape SVG -->
<circle r="100" cx="100" cy="100" />
</svg>
</body>
</html>
输出:
相关用法
- HTML <style> media属性用法及代码示例
- HTML <area> media属性用法及代码示例
- HTML <link> media属性用法及代码示例
- HTML <source> media属性用法及代码示例
- HTML <a> media属性用法及代码示例
- HTML media属性用法及代码示例
注:本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 SVG media Attribute。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。