Media Query es una técnica CSS que se utiliza para producir un diseño receptivo. Esencialmente, incluye condiciones, y el diseño receptivo solo se mostrará si se cumplen esas condiciones. ¿Por qué es útil? Digamos que desea hacer una imagen más pequeña en todos los dispositivos móviles pero más grande en todos los demás dispositivos, como iPads, computadoras portátiles y de escritorio, entonces la mejor manera de hacerlo posible es mediante consultas de medios.
El enfoque general para usar una consulta de medios incluye:
CSS
@media only screen and (/*condition goes here */) {
body {
/* Conditions goes here */
}
}
Explicación: Lo anterior es la forma general de llamar a la consulta de medios. Entre paréntesis, agregamos las condiciones para las ventanas del navegador, como cuál es el tamaño mínimo/máximo que desea que tenga la ventana del navegador para que aparezcan las condiciones en el «cuerpo» .
Ejemplo: Considere el siguiente código:
CSS
@media only screen and (max-width: 500px) {
body {
background-color: black;
}
}
En este caso, básicamente estamos diciendo que se cumpla esta condición:
body {
background-color: black;
}
si y solo si el ancho del dispositivo es menor o igual a 500px. Por supuesto, puede cambiar las condiciones y hacerlo de acuerdo con su deseo. Sin embargo, esta es la idea general de cómo funcionan las consultas de medios.
También podemos agregar otra condición para el ancho del navegador, considere el siguiente código:
CSS
@media only screen and (min-width: 300px) and (max-width: 500px) {
body {
background-color: black;
}
}
En este caso, observe cómo se dan dos condiciones entre paréntesis. Básicamente, estamos diciendo que ejecute el siguiente código si y solo si el tamaño mínimo del navegador es de 300 px y el máximo es de 500 px. Por lo tanto, el código no se ejecutará si la ventana del navegador tiene menos de 300 px o más de 500 px. Debe estar entre 300px y 500px (inclusive). Esta es otra forma de usar una consulta de medios para satisfacer las condiciones que pueda tener.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
@media only screen and (min-width: 500px)
and (max-width: 700px) {
body {
background-color: red;
}
}
</style>
</head>
<body>
<p>
On devices with minimum width of 500px
and maximum width of 700px, the background
color will be black
</p>
<p>
On the other hand, devices with less than the
minimum width of 500px will have the
body be displayed in blue
</p>
</body>
</html>
Salida: las consultas de medios son muy útiles cuando desea que un código específico solo se ejecute si se cumplen las condiciones relacionadas con el tamaño de la ventana. Por ejemplo, si desea que el color de fondo de la página sea negro en dispositivos más grandes pero azul en dispositivos más pequeños, las consultas de medios son la mejor manera de manejar estos casos.
Publicación traducida automáticamente
Artículo escrito por mhussainomer03 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA