Ejemplo
Dos hojas de estilo diferentes para dos tipos de medios diferentes (pantalla y la impresión):
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Inténtalo tú mismo " Definición y Uso
La media atributo especifica qué dispositivo / medio del recurso de destino está optimizado para.
Este atributo se utiliza sobre todo con hojas de estilo CSS para especificar diferentes estilos para diferentes tipos de medios.
La media de atributos puede aceptar varios valores.
Soporte para el navegador
| Atributo | |||||
|---|---|---|---|---|---|
| media | Sí | Sí | Sí | Sí | Sí |
Diferencias entre HTML 4.01 y HTML5
La media de atributos ahora es compatible con más valores.
Sintaxis
<link media="value">
posibles Operators
| Valor | Descripción |
|---|---|
| and | Especifica un operador AND |
| not | Especifica un operador NOT |
| , | Especifica un operador OR |
dispositivos
| Valor | Descripción |
|---|---|
| all | Defecto. Conveniente para todos los dispositivos |
| aural | Los sintetizadores de voz |
| braille | dispositivos de retroalimentación braille |
| handheld | Los dispositivos de mano (pequeña pantalla, ancho de banda limitado) |
| projection | proyectores |
| Modo de vista previa de impresión / páginas impresas | |
| screen | Las pantallas de ordenador |
| tty | Teletipos y medios similares utilizando una cuadrícula de caracteres de paso fijo |
| tv | dispositivos de tipo televisión (baja resolución, capacidad de desplazamiento limitado) |
Valores
| Valor | Descripción |
|---|---|
| width | Especifica el ancho del área de visualización de destino. "min-" y "max-" prefijos pueden ser utilizados. Ejemplo: media="screen and (min-width:500px)" |
| height | Especifica la altura del área de visualización de destino. "min-" y "max-" prefijos pueden ser utilizados. Ejemplo: media="screen and (max-height:700px)" |
| device-width | Especifica el ancho de la pantalla de destino / papel. "min-" y "max-" prefijos pueden ser utilizados. Ejemplo: media="screen and (device-width:500px)" |
| device-height | Especifica la altura de la meta de pantalla / papel. "min-" y "max-" prefijos pueden ser utilizados. Ejemplo: media="screen and (device-height:500px)" |
| orientation | Especifica la orientación del objetivo de visualización / papel. Valores posibles: "portrait" o "landscape" Ejemplo: media="all and (orientation: landscape)" |
| aspect-ratio | Especifica la relación de anchura / altura de la zona de visualización de destino. "min-" y "max-" prefijos pueden ser utilizados. Ejemplo: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Especifica la relación de dispositivo de anchura / dispositivo de altura del objetivo de visualización / papel. "min-" y "max-" prefijos pueden ser utilizados. Ejemplo: media="screen and (aspect-ratio:16/9)" |
| color | Especifica los bits por color de visualización de destino. "min-" y "max-" prefijos pueden ser utilizados. Ejemplo: media="screen and (color:3)" |
| color-index | Especifica el número de colores de la pantalla de destino puede manejar. "min-" y "max-" prefijos pueden ser utilizados. Ejemplo: media="screen and (min-color-index:256)" |
| monochrome | Especifica los bits por pixel en una memoria intermedia de cuadros en blanco y negro. "min-" y "max-" prefijos pueden ser utilizados. Ejemplo: media="screen and (monochrome:2)" |
| resolution | Especifica la densidad de píxeles (ppp o DPCM) de la meta de pantalla / papel. "min-" y "max-" prefijos pueden ser utilizados. Ejemplo: media="print and (resolution:300dpi)" |
| scan | Especifica el método de barrido de una pantalla de televisión. Los valores posibles son "progressive" y "interlace" . Ejemplo: media="tv and (scan:interlace)" |
| grid | Especifica si el dispositivo de salida es de rejilla o de mapa de bits. Los valores posibles son "1" para la red, y el "0" de otra manera. Ejemplo: media="handheld and (grid:1)" |