El atributo de medios de HTML se usa para especificar el navegador, para qué dispositivos está optimizado el documento vinculado. Este atributo generalmente se usa con las hojas de estilo CSS, pero también se puede usar en una página web HTML simple. El atributo permite al usuario elegir entre una gran variedad de dispositivos y puede aceptar varios valores. Este atributo se utiliza para especificar que la URL de destino está diseñada para dispositivos especiales (como iPhone, Android, etc.), medios impresos o de voz, proyectores, televisores, etc.
Nota: Este atributo solo se puede usar si el atributo href se usa ya que href especifica el documento vinculado y, por lo tanto, el atributo multimedia se usa para especificar cómo y en qué dispositivos aparecerá el documento vinculado y será compatible.
Varios valores de dispositivos que podemos especificar son los siguientes:
| Si. No. | VALORES | DESCRIPCIÓN |
| 1. | todos |
Es Predeterminado, si no se especifica. Es más adecuado para todos los dispositivos de tipo de medios. Sintaxis- <a href=”#” media=”all target=”_blank”> Haga clic aquí</a> |
| 2. | pantalla |
Se utiliza para las pantallas de ordenador, teléfonos inteligentes, etc. Sintaxis- <a href=”#” media=”screen” target=”_blank”> Haga clic aquí</a> |
| 3. | discurso |
Se utiliza para los lectores de pantalla que «leen» la página en voz alta. Sintaxis- <a href=”#” media=”speech” target=”_blank”> Haga clic aquí</a> |
| 4. | impresión |
Se utiliza para el modo de vista previa de impresión/modo de página impresa. Sintaxis: <a href=”#” media=”print” target=” _blank”> Haga clic aquí</a> |
| 5. | televisión |
Se utiliza para dispositivos de tipo Televisión (de baja resolución o con capacidad de desplazamiento limitada). Sintaxis- <a href=”#” media=”tv” target=”_blank”> Haga clic aquí</a> |
También podemos agregar un poco más de información específica adicional al especificar el tipo de dispositivo de medios para mostrar cómo se optimizaría el documento vinculado.
| Si. No. | VALOR | DESCRIPCIÓN |
| 1. | ancho |
Se utiliza para especificar el ancho del área de visualización de medios de destino. Sintaxis- <a href=”#” media=”screen and (min-width:100px)” target=”_blank”> Haga clic aquí</a> |
| 2. | altura |
Se utiliza para especificar la altura del área de visualización de medios de destino. Sintaxis- <a href=”#” media=”screen and (max-height:700px)” target=”_blank”> Haga clic aquí</a> |
| 3. | ancho del dispositivo |
Se utiliza para especificar el ancho del área de visualización de medios de destino. . Sintaxis- <a href=”#” media=”screen and (device-width:100px)” target=”_blank”> Haga clic aquí</a> |
| 4. | relación de aspecto |
Se utiliza para especificar la relación ancho/alto del área de visualización de medios de destino. Sintaxis- <a href=”#” media=”screen and (aspect-ratio:4/3)” target=”_blank”> Haga clic aquí</a> |
| 5. | altura del dispositivo |
Se utiliza para especificar la altura de la pantalla/papel de destino. Sintaxis- <a href=”#” media=”screen and (device-height:400px)” target=”_blank”> Haga clic aquí</a> |
| 6. | orientación |
Se utiliza para especificar la orientación de la pantalla/papel del dispositivo multimedia. Sintaxis- <a href=”#” media=”all and (orientación: horizontal)” target=”_blank”> Haga clic aquí</a> |
| 7. | relación de aspecto del dispositivo |
Se utiliza para especificar la proporción de ancho/alto del dispositivo de la pantalla/papel del dispositivo de medios. Sintaxis- <a href=”#” media=”screen and (aspect-ratio:4/3)” target=”_blank”> Haga clic aquí</a> |
| 8. | color |
Se utiliza para especificar los bits por color de la pantalla del dispositivo multimedia. Sintaxis- <a href=”#” media=”screen and (color:1)” target=”_blank”> Haga clic aquí</a> |
| 9. | Indice de color |
Se utiliza para especificar el número de colores que puede admitir la pantalla del dispositivo multimedia. Sintaxis: <a href=”#” media=”screen and (min-color-index:250)” target=”_blank”> Haga clic aquí</a> |
| 10 | resolución |
Se utiliza para especificar la densidad de píxeles de la pantalla/papel del dispositivo multimedia. Sintaxis- <a href=”#” media=”print and (resolución: 400dpi)” target=”_blank”> Haga clic aquí</a> |
Sintaxis:
<a href="#" media="all" target="_blank"></a>
A continuación se muestra el código que ilustra cómo especificar atributos de medios.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GFG</h2><br> <a href="https://ide.geeksforgeeks.org/" media="all and (aspect-ratio:16/9)" target="_blank"> Click here </a> <p> the code here in HTML specifies that the link attached is valid for "ALL" media devices and with aspect-ratio=16:9 </p> </body> </html>
Salida de muestra en Microsoft Edge.
Publicación traducida automáticamente
Artículo escrito por igauravsharma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA