El atributo de medios muestra una consulta de medios que debe coincidir para que se aplique una hoja de estilo. Solo el elemento < style > está usando este atributo.
Sintaxis:
<style media="media-query-list">
// Styling the element
</style>
Valores de atributo: el atributo de medios acepta los valores mencionados anteriormente y descritos a continuación:
- media-query-list: este valor contiene una consulta de medios que permite que la hoja de estilo se aplique al elemento.
Los siguientes ejemplos ilustran el uso del atributo multimedia .
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA