Consultas de medios en CSS | Explicado
Este artículo presenta una guía completa para las consultas de medios CSS y se organizará de la siguiente manera:
- ¿Cuáles son las consultas de medios de CSS??
- Sintaxis básica
- Por qué se utilizan consultas de medios
- Tipos de consultas de medios
- Implementación práctica de consultas de medios de CSS
Entonces, comencemos!
¿Cuáles son las consultas de CSS de los medios??
La consulta de medios nos permite crear varios diseños dependiendo del tamaño de la ventana gráfica. Por ejemplo, las consultas de los medios pueden detectar si el usuario está usando un mouse o una pantalla táctil, etc.
La lista a continuación presenta diferentes cosas que una consulta de medios CSS verifica:
- Altura y ancho de la visión.
- Altura y ancho del dispositivo.
- Resolución.
- Orientación del dispositivo I.mi. Retrato o paisaje.
En general, podemos decir que las consultas de los medios son muy útiles para detectar los diversos aspectos relacionados con el entorno en el que se ejecuta el sitio.
Sintaxis básica
La sintaxis básica de las consultas de medios consiste en múltiples cosas como el tipo de medios (i.mi. pantalla, todo, etc.), una expresión única o múltiple. La consulta de los medios siempre se iniciará con el "@media". El "tipo de medio"Se puede combinar con expresión (s) Sin embargo, utilizando un operador lógico, es opcional:
@Media Mediatype y (Expresión/Expresiones)/ * Código/reglas CSS */
Una consulta de medios en CSS es una operación lógica, por lo tanto, siempre que se haga realidad, el CSS relacionado se aplicará al elemento de destino.
Por qué se utilizan consultas de medios
Las consultas de medios se utilizan para proporcionar una apariencia personalizada a un sitio web para varios dispositivos, como computadoras portátiles, computadoras de escritorio, teléfonos móviles, etc. Entonces, podemos decir que las consultas de los medios se utilizan para crear nuevas reglas CSS o para anular el CSS existente para presentar un sitio web receptivo.
Tipos de consultas de medios
Hay cuatro tipos de consultas de medios CSS que se pueden usar para diferentes propósitos como se enumeran a continuación:
| Tipo de medio | Descripción |
|---|---|
| todo | Utilizado para todos los tipos de medios I.mi. pantalla, impresión, discurso |
| pantalla | Utilizado para pantallas como teléfonos móviles, computadoras portátiles, etc. |
| imprimir | Utilizado solo para impresoras. |
| discurso | Usado para la lectura de pantalla |
Implementación práctica de consultas de medios de CSS
A partir de ahora, tenemos una idea básica de lo que es una consulta de medios, su sintaxis, por qué deberíamos usarla y cuáles son los diferentes tipos de consultas de medios CSS. Y ahora para una comprensión profunda, implementaremos estos conceptos teóricos en un escenario práctico.
Ejemplo
En este ejemplo, vamos a crear tres párrafos y un encabezado, y estableceremos el color de fondo del cuerpo y la alineación de texto como gris claro y centro respectivamente. Además, utilizaremos las consultas de los medios para modificar el color de fondo y la alineación de texto para cielo azul y izquierda que entrará en acción cuando el tamaño de la pantalla sea más ancho o igual a 360 píxeles:
Preguntas de los medios
El color de fondo del cuerpo es gris claro
El color de fondo se cambiará de gris claro a azul cielo si la vista de la ventana es más ancha que los 360 píxeles
El fragmento dado a continuación mostrará el funcionamiento de las consultas de CSS Media:
Desde la salida está claro que inicialmente, el color de fondo era gris claro y el texto estaba alineado en el centro porque en ese momento el ancho de la pantalla era inferior a 360. Sin embargo, cuando cambiamos (más de 360) el ancho de la pantalla, el color de fondo y la alineación del texto se modificaron al color azul cielo y la alineación de la izquierda.
Conclusión
Las consultas de los medios se utilizan para personalizar la presentación del sitio web de acuerdo con el tamaño de la pantalla del usuario. Usando consultas de medios, podemos mostrar los diversos marcos dependiendo del tipo del dispositivo (móvil, tableta, escritorio). En CSS, las consultas de medios son una operación lógica y, por lo tanto, siempre que se haga realidad, el CSS relacionado se aplicará al elemento de destino. Este artículo presenta una comprensión detallada de las consultas de medios de CSS y para una mejor comprensión, proporciona fragmentos de código junto con respectivas salidas.