CSSPreguntas de los medios


Sintaxis

  • @media [no | solo] tipo de medio y (función de medios) {/ * reglas de CSS para aplicar * /}

Parámetros

Parámetro Detalles
mediatype (Opcional) Este es el tipo de medio. Podría ser cualquier cosa en el rango de all a la screen .
not (Opcional) No aplica el CSS para este tipo de medio en particular y se aplica para todo lo demás.
media feature Lógica para identificar caso de uso para CSS. Opciones que se describen a continuación.
Característica de los medios Detalles
aspect-ratio Describe la relación de aspecto del área de visualización seleccionada del dispositivo de salida.
color Indica el número de bits por componente de color del dispositivo de salida. Si el dispositivo no es un dispositivo de color, este valor es cero.
color-index Indica el número de entradas en la tabla de búsqueda de colores para el dispositivo de salida.
grid Determina si el dispositivo de salida es un dispositivo de cuadrícula o un dispositivo de mapa de bits.
height La función de medios de altura describe la altura de la superficie de representación del dispositivo de salida.
max-width CSS no se aplicará en un ancho de pantalla más ancho que el especificado.
min-width CSS no se aplicará en un ancho de pantalla más estrecho que el especificado.
max-height CSS no se aplicará en una altura de pantalla más alta que la especificada.
min-height CSS no se aplicará en una altura de pantalla más corta que la especificada.
monochrome Indica el número de bits por píxel en un dispositivo monocromo (escala de grises).
orientation CSS solo se mostrará si el dispositivo está utilizando la orientación especificada. Ver comentarios para más detalles.
resolution Indica la resolución (densidad de píxeles) del dispositivo de salida.
scan Describe el proceso de escaneo de los dispositivos de salida de televisión.
width La función de ancho de medios describe el ancho de la superficie de representación del dispositivo de salida (como el ancho de la ventana del documento o el ancho del cuadro de página en una impresora).
Características en desuso Detalles
device-aspect-ratio CSS en Deprecated solo se mostrará en dispositivos cuya relación altura / anchura coincida con la proporción especificada. Esta es una característica deprecated y no se garantiza que funcione.
max-device-width Deprecated Igual que max-width pero mide el ancho físico de la pantalla, en lugar del ancho de visualización del navegador.
min-device-width Deprecated Igual que min-width pero mide el ancho físico de la pantalla, en lugar del ancho de visualización del navegador.
max-device-height Deprecated Igual que max-height pero mide el ancho físico de la pantalla, en lugar del ancho de visualización del navegador.
min-device-height Deprecated Igual que min-height pero mide el ancho físico de la pantalla, en lugar del ancho de visualización del navegador.

Observaciones

Las consultas de medios son compatibles con todos los navegadores modernos, incluidos Chrome, Firefox, Opera e Internet Explorer 9 y superiores.


Es importante tener en cuenta que la función de medios de orientation no se limita a los dispositivos móviles. Se basa en el ancho y el alto de la ventana gráfica (no de la ventana o los dispositivos).

El modo horizontal es cuando el ancho de la ventana gráfica es mayor que la altura de la ventana gráfica.

El modo vertical es cuando la altura de la ventana gráfica es mayor que el ancho de la ventana gráfica.

Esto generalmente se traduce en un monitor de escritorio en modo horizontal, pero a veces puede ser vertical.


En la mayoría de los casos, los dispositivos móviles informarán su resolución y no su tamaño real de píxeles, que puede diferir debido a la densidad de píxeles. Para obligarlos a informar su tamaño real de píxeles, agregue lo siguiente dentro de la etiqueta de su head :

<meta name="viewport" content="width=device-width, initial-scale=1">


Preguntas de los medios Ejemplos relacionados