El atributo de medios de estilo HTML se utiliza para especificar los medios o dispositivos para los que se optimiza el estilo CSS. este atributo especifica el estilo para dispositivos específicos como medios impresos o voz. Este atributo puede aceptar varios valores.
Sintaxis:
<style media="value">
Operadores posibles:
| Valor | Descripción |
|---|---|
| y | Y operador |
| no | NO operador |
| , | O operador |
y superioresDispositivos:
| Valor | Descripción |
|---|---|
| todos | Apto para todos los dispositivos |
| auditivo | sintetizadores de voz |
| braille | Dispositivos de retroalimentación braille |
| Mano | Dispositivos portátiles (pantalla pequeña, ancho de banda limitado) |
| proyección | Proyectores |
| impresión | Modo de vista previa de impresión/páginas impresas |
| pantalla | pantallas de computadora |
| tty | Teletipos y medios similares que utilizan una cuadrícula de caracteres de paso fijo |
| televisión | dispositivos de baja resolución o capacidad de desplazamiento limitada como la televisión. |
Valores:
| Valor | Descripción |
|---|---|
| ancho | el ancho del área de visualización objetivo. |
| altura | altura del área de visualización objetivo |
| ancho del dispositivo | pantalla de destino o el ancho del papel. |
| altura del dispositivo | pantalla de destino o la altura del papel. |
| orientación | pantalla de destino o la orientación del papel. |
| relación de aspecto | relación ancho/alto del área de visualización de destino. |
| relación de aspecto del dispositivo | proporción de ancho de dispositivo/alto de dispositivo de la pantalla/papel de destino. |
| color | bits por color de la pantalla de destino. |
| Indice de color | número de colores que puede manejar la pantalla de destino. |
| monocromo | bits por píxel en un búfer de cuadro monocromático. |
| resolución | densidad de píxeles (dpi o dpcm) de la pantalla/papel de destino. |
| escanear | método de escaneo de una pantalla de televisión. |
| cuadrícula | si el dispositivo de salida es cuadrícula o mapa de bits. |
Nota: Se pueden usar prefijos como «min-« y «max-» .
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
<style media="print">
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p><a href="https://ide.geeksforgeeks.org/tryit.php"
target="_blank">
Click here
</a>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el atributo multimedia de estilo HTML se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 3 y superior
- Firefox 1 y superior
- Apple Safari 1 y superior
- Ópera 3.5 y superior
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