Regla CSS @media

La regla @media CSS se usa para aplicar un conjunto diferente de estilos para diferentes medios/dispositivos usando Media Queries. Una consulta de medios se utiliza principalmente para verificar la altura, el ancho, la resolución y la orientación (vertical/horizontal) del dispositivo. Esta regla CSS es una forma de aprovechar al máximo el diseño receptivo mediante la entrega de un diseño más optimizado para un tipo de pantalla o dispositivo específico, es decir, un teléfono inteligente, una PC. Las consultas de medios también se pueden usar para especificar ciertos estilos solo para documentos impresos o para lectores de pantalla.

Sintaxis:

@media not|only mediatype and (media feature and|or|not mediafeature) 
{
    // CSS Property
}

Palabras clave utilizadas:

• not: Revierte toda la media query.
• only: evita que el navegador anterior (navegadores no compatibles) aplique los estilos especificados.
• y: Se utiliza para combinar dos tipos de medios o funciones de medios.

Tipos de medios:

• all: es el tipo de medio predeterminado. Se utiliza para todos los dispositivos de tipo de medios.
• print: Se utiliza para dispositivos de impresora.
• screen: Se utiliza para pantallas de ordenador, pantallas de móviles, etc.
• Speech: Se utiliza para lectores de pantalla que leen la página.

Funciones de medios: hay muchas funciones de medios en Media Query, algunas de ellas se enumeran a continuación:

• any-hover: cualquier mecanismo de entrada disponible permite al usuario pasar el cursor sobre cualquier elemento.
• any-pointer: define que cualquier mecanismo de entrada disponible es un dispositivo señalador y, de ser así, ¿qué tan preciso es?
• any-ratio: se utiliza para establecer la relación entre el ancho y el alto de la ventana gráfica.
• color : se utiliza para configurar los componentes de color de los dispositivos de salida.
• gama de colores: se utiliza para establecer la gama de colores que debe admitir el agente de usuario o en los dispositivos de salida.
• color-index: Se utiliza para establecer la cantidad de colores que el dispositivo puede mostrar.
• grid : Se utiliza para especificar el tamaño de filas y columnas.
• altura : se utiliza para establecer la altura de la ventana gráfica.
• hover: permite al usuario pasar el cursor sobre cualquier elemento.
• colores invertidos: Esto define si cualquier dispositivo invierte colores
• light-level: Define el nivel de luz.
• max-aspect-ratio: se utiliza para establecer la relación máxima de ancho y alto.
• max-color: Se utiliza para establecer el número máximo de bits por componente de color para un dispositivo de salida.
• índice de color máximo; Se utiliza para establecer el número máximo de colores que el dispositivo puede mostrar.
• max-height : Establece la altura máxima del área de visualización del navegador.
• max-monochrome: Se utiliza para establecer el número máximo de bits por “color” en un dispositivo monocromático.
• resolución máxima: se utiliza para establecer la resolución máxima del dispositivo de salida.
• max-width : establece el ancho máximo del área de visualización del navegador.
• min-aspect-ratio: Se utiliza para establecer la relación mínima de ancho y alto.
• min-color: Se utiliza para establecer el número mínimo de bits por componente de color para un dispositivo de salida.
• índice de color mínimo; Se utiliza para establecer el número mínimo de colores que el dispositivo puede mostrar.
• min-height : Establece la altura mínima del área de visualización del navegador.
• max-monochrome: Se utiliza para establecer un número máximo de bits por “color” en un dispositivo monocromático.
• resolución mínima: se utiliza para establecer la resolución mínima del dispositivo de salida.
• min-width : Establece el ancho mínimo del área de visualización del navegador.
• Monocromo: Se utiliza para establecer el número de bits por “color” en un dispositivo monocromático.
• orientación: Se utiliza para establecer la orientación de la ventana gráfica que paisaje o retrato.
• bloque de desbordamiento: se utiliza para controlar la situación cuando el contenido desborda la ventana gráfica.
• overflow-inline: se utiliza para controlar la situación cuando el contenido desborda la ventana gráfica a lo largo del eje en línea que se desplaza.
• puntero: es un mecanismo de entrada principal para un dispositivo señalador.
• resolución : Establece la resolución del dispositivo usando dpi o dpcm.
• escanear: se utiliza para realizar el proceso de escaneo de los dispositivos de salida.
• secuencias de comandos: ¿Hay alguna secuencia de comandos disponible como JS.
• actualización: se utiliza para actualizar rápidamente los dispositivos de salida.
• ancho : se utiliza para establecer el ancho de la ventana gráfica.

Ejemplo:  este ejemplo ilustra el uso de la regla @media para implementar las diversas propiedades de estilo en función del resultado de una o más consultas de medios. La regla @media solo funcionará si la consulta de medios coincide con el dispositivo en el que se está utilizando el contenido.

<!DOCTYPE html>
<html>
 
<head>
    <title> CSS @media rule </title>
    <style>
    @media screen and (max-width: 600px) {
        h1,
        h2 {
            color: green;
            font-size: 25px;
        }
        p {
            background-color: green;
            color: white;
        }
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS @media rule</h2>
     
 
<p>GeeksforGeeks: A computer science portal</p>
 
 
</body>
 
</html>

Salida:  desde la salida, podemos ver cuando el ancho de la pantalla cambia de tamaño a menos o igual a 600 px, luego el color del texto también cambia a verde.

Navegadores compatibles: los navegadores compatibles con la regla @media se enumeran a continuación:

• Google Chrome 1.0
• Internet Explorer 6.0
• Microsoft borde 12
• Firefox 1
• Ópera 9.2
• Safari 3.0