Atributo <style> media de HTML

Etiqueta <style> de HTML

Definición y uso

media Propiedad utilizada para definir el medio / dispositivo al que se dirigen los estilos CSS (optimizados).

Esta propiedad se utiliza para definir estilos que se aplican a dispositivos específicos (como iPhone), voz o medios de impresión.

Consejo:Esta propiedad puede aceptar múltiples valores.

Ejemplo

Ejemplo 1

Estilos definidos para impresión:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Intente personalmente

Ejemplo 2

Se utilizan las características del ancho de la propiedad media para distinguir entre los dos grupos de estilos:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Intente personalmente

Nota:Se utiliza el primer grupo de estilos cuando el ancho de la ventana del navegador es menor de 500 píxeles, y el segundo grupo de estilos cuando el ancho de la ventana es mayor de 500 píxeles.

Sintaxis

<style media="value">

Operadores posibles

Operadores Descripción
and Operador AND definido.
not Operador NOT definido.
, Operador OR definido.

Las condiciones de uso del estilo pueden diseñarse de manera muy detallada. Lo primero que debe aclararse es el tipo de dispositivo al que se dirige. La siguiente tabla resume todos los valores que cumplen con los requisitos:

Dispositivo

Dispositivo Descripción
all Predeterminado. Adecuado para todos los dispositivos.
aural Sintetizador de voz.
braille Dispositivos de retroalimentación en braille.
handheld Dispositivos portátiles (pantalla pequeña, ancho de banda limitado).
projection Proyector.
print Modo de vista previa de impresión / página de impresión.
screen Pantalla de computadora.
tty Máquinas telegráficas de teclado con rejilla de caracteres de espacio fijo y medios similares.
tv Dispositivos de televisión (baja resolución, capacidad de desplazamiento limitada).

El navegador es responsable de interpretar la clasificación de dispositivos. Algunos tipos de dispositivos (como screen y print) tienen una interpretación bastante consistente en todos los navegadores, pero otros dispositivos (como handheld) pueden tener interpretaciones más variables. Por lo tanto, verificar que la interpretación del navegador para un dispositivo específico sea la misma que la suya propia es muy necesario.

Características

Características Descripción
width

Define el ancho del área de visualización objetivo.

Se pueden usar los prefijos "min-" y "max-".

Por ejemplo: media="screen and (min-width:500px)"
height

Define la altura del área de visualización objetivo.

Se pueden usar los prefijos "min-" y "max-".

Por ejemplo: media="screen and (max-height:700px)"
device-width

Define el ancho del monitor objetivo/papel.

Se pueden usar los prefijos "min-" y "max-".

Por ejemplo: media="screen and (device-width:500px)"
device-height

Define la altura del monitor objetivo/papel.

Se pueden usar los prefijos "min-" y "max-".

Por ejemplo: media="screen and (device-height:500px)"
orientation

Define la orientación del monitor objetivo/papel.

Los valores admitidos: portrait o landscape.

Esta característica no tiene adjetivos.

Por ejemplo: media="all and (orientation: landscape)"
aspect-ratio

Define la relación de aspecto del área de visualización objetivo.

Se pueden usar los prefijos "min-" y "max-".

Por ejemplo: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Define la relación de aspecto del ancho/altura del monitor objetivo/papel.

Se pueden usar los prefijos "min-" y "max-".

Por ejemplo: media="screen and (aspect-ratio:16/9)"
color

Define el número de bits por color del monitor objetivo.

Se pueden usar los prefijos "min-" y "max-".

Por ejemplo: media="screen and (color:3)"
color-index

Define el número de colores que puede manejar el monitor objetivo.

Se pueden usar los prefijos "min-" y "max-".

Por ejemplo: media="screen and (min-color-index:256)"
monochrome

Define el número de bits por píxel en el búfer de color monocromático.

Se pueden usar los prefijos "min-" y "max-".

Por ejemplo: media="screen and (monochrome:2)"
resolution

Define la densidad de píxeles del monitor objetivo/papel (dpi o dpcm).

Se pueden usar los prefijos "min-" y "max-".

Por ejemplo: media="print and (resolution:300dpi)"
scan

Define el modo de escaneo del televisor.

Los valores admitidos son progressive y interlace.

Esta característica no tiene adjetivos.

Por ejemplo: media="tv and (scan:interlace)"
grilla

Se especifica si el dispositivo de salida es una rejilla o un mapa de bits.

Los dispositivos en forma de grilla utilizan una rejilla fija para mostrar contenido, como terminales basados en caracteres y teléfonos celulares con una sola línea de visualización.

Los valores compatibles son 0 y 1 (1 representa dispositivos en forma de grilla).

Esta característica no tiene adjetivos.

Por ejemplo: media="handheld and (grid:1)"

Las características como width suelen utilizarse junto con los adjetivos min y max. Sin estos adjetivos, el uso del estilo depende de dimensiones de ventana muy precisas, pero agregar los adjetivos hace que las condiciones sean más flexibles.

La tabla superior enumera e ilustra las diversas características disponibles. A menos que se especifique lo contrario, estas características pueden usarse con min- y max- para formar valores de umbral en lugar de valores precisos.

Al igual que en los dispositivos especificados, estas características también son interpretadas por el navegador. La situación específica de qué características reconocen los navegadores y cuándo se consideran existentes y utilizables es compleja. Si se deben aplicar estilos basados en estas características, se debe realizar una prueba completa y estar preparado para alternativas de estilo en caso de que las características esperadas no estén disponibles.

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte

Etiqueta <style> de HTML