HTML | atributo de medios – Part 1

El atributo de medios HTML se emplea para especificar los medios o dispositivos para los que se optimiza el documento acoplado. Este atributo especifica que la URL de destino está diseñada para dispositivos especiales como iPhone, voz o medios impresos. 

Este atributo puede aceptar varios valores.
Aplicable: 

Ejemplo: atributo multimedia HTML <a> 

html

<html>
  
<body>
    <h1>GeeksForGeeks</h1>
    <h2>
    HTML media 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>

Producción: 
 

Ejemplo: atributo de medios HTML <fuente> 
 

html

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

Salida: cambia el tamaño del navegador. 
 

Navegadores compatibles: los navegadores compatibles con el atributo multimedia HTML se enumeran a continuación: 

  • Google Chrome
  • explorador de Internet
  • Firefox
  • safari de manzana
  • Ópera

Publicación traducida automáticamente

Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *