Media Queries en CSS
Las Media Queries en CSS son reglas condicionales que permiten aplicar estilos específicos dependiendo de características del dispositivo o el entorno en el que se visualiza una página web. Esto es especialmente útil para crear diseños responsivos, que se adaptan a diferentes tamaños de pantalla.
¿Qué es una Media Query?
Una media query es una condición que se evalúa en función de las características del dispositivo. Por ejemplo, puedes usar una media query para aplicar estilos si el ancho de la pantalla es menor que 600 píxeles, o si el dispositivo es una pantalla táctil. De esta manera, puedes ajustar el diseño para que se vea bien en dispositivos móviles, tabletas o escritorios.
La sintaxis básica de una media query es la siguiente:
@media (condición) {
/* Estilos específicos para la condición */
}
La condición puede ser cualquier propiedad como el ancho de la pantalla, la resolución, el tipo de dispositivo, entre otras.
Ejemplo básico de Media Query
Veamos un ejemplo donde se cambian los estilos de un párrafo dependiendo del tamaño de la pantalla. Si la pantalla tiene un ancho menor a 600 píxeles, se aplicará un color de texto diferente:
@media (max-width: 600px) {
p {
color: red;
}
}
En este caso, la condición (max-width: 600px) significa "si el ancho de la pantalla es menor o igual a 600 píxeles". Si esta condición se cumple, el color del texto del párrafo será rojo.
Tipos comunes de Media Queries
Existen varias condiciones que puedes usar en las media queries. Algunas de las más comunes son:
max-width: Aplica los estilos si el ancho de la pantalla es menor o igual al valor especificado.min-width: Aplica los estilos si el ancho de la pantalla es mayor o igual al valor especificado.max-height: Aplica los estilos si la altura de la pantalla es menor o igual al valor especificado.min-height: Aplica los estilos si la altura de la pantalla es mayor o igual al valor especificado.orientation: Permite aplicar estilos dependiendo de si el dispositivo está en modo vertical (portrait) o horizontal (landscape).resolution: Permite aplicar estilos dependiendo de la resolución del dispositivo (por ejemplo, pantallas Retina).
Ejemplo de Media Query con min-width
Supongamos que deseas cambiar el diseño de una página web en pantallas más grandes. Puedes usar min-width para aplicar los estilos solo en pantallas de más de 768 píxeles de ancho:
@media (min-width: 768px) {
body {
background-color: lightblue;
}
}
En este ejemplo, cuando el ancho de la pantalla sea mayor o igual a 768 píxeles, el color de fondo del cuerpo de la página cambiará a azul claro.
Ejemplo de Media Query con orientation
Las media queries también se pueden usar para detectar la orientación del dispositivo. Por ejemplo, si el dispositivo está en modo paisaje, puedes cambiar el diseño:
@media (orientation: landscape) {
body {
background-color: lightgreen;
}
}
En este caso, el fondo de la página cambiará a verde claro si el dispositivo está en orientación horizontal.
Media Queries para un Diseño Responsivo
Las media queries son la base de los diseños responsivos. Puedes usar varias media queries para crear un diseño que se adapte a diferentes tamaños de pantalla. A continuación, te mostramos un ejemplo de cómo hacer que un diseño de dos columnas se convierta en una sola columna en pantallas pequeñas:
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
}
En este ejemplo, en pantallas más grandes, los elementos se mostrarán en dos columnas. Cuando el ancho de la pantalla sea menor a 600 píxeles, las columnas se convertirán en una sola columna para facilitar la visualización en dispositivos móviles.
Media Queries con Múltiples Condiciones
Es posible combinar varias condiciones en una sola media query para hacer reglas aún más específicas. Aquí tienes un ejemplo:
@media (min-width: 600px) and (max-width: 1024px) {
p {
font-size: 18px;
}
}
En este caso, la media query se aplica solo si el ancho de la pantalla está entre 600 píxeles y 1024 píxeles, y en ese caso, el tamaño de la fuente del párrafo será de 18 píxeles.
Conclusión
Las media queries son una herramienta poderosa en CSS para crear sitios web que se adaptan a diferentes tamaños de pantalla y dispositivos. Al usar media queries, puedes aplicar estilos específicos basados en el tamaño de la pantalla, la resolución o la orientación del dispositivo, lo que permite que tu sitio web tenga un diseño responsivo.
Es fundamental utilizar las media queries correctamente para mejorar la experiencia del usuario en todos los dispositivos. Siempre recuerda probar el diseño en diferentes resoluciones para asegurarte de que el contenido se vea bien en cada dispositivo.