La consulta de medios se utiliza para crear un diseño web receptivo. Significa que la vista de la página web difiere de un sistema a otro según la pantalla o los tipos de medios.
pantalla: se utiliza para establecer el tamaño de la pantalla de la consulta de medios. El tamaño de la pantalla se puede configurar usando max-width y min-width. El tamaño de la pantalla es diferente de una pantalla a otra.
Sintaxis:
@media screen and (max-width: width)
Ejemplo: este ejemplo utiliza una consulta de medios que funciona cuando el ancho máximo del área de visualización es de 400 px. Está especificando la pantalla a diferencia de los otros tipos de medios disponibles, siendo el otro más común el impreso.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- CSS property to set style -->
<style>
body {
background-color: lightgreen;
}
/* Media query */
@media screen and (max-width: 400px) {
body {
background-color: green;
color:white;
}
}
</style>
</head>
<body>
<h1>The @media Rule</h1>
<p>
Resize the browser window. When the width of
this document is 400 pixels or less, the
background-color is "green", otherwise it
is "lightblue".
</p>
</body>
</html>
Salida:
tamaño de pantalla superior a 400 px: 
tamaño de pantalla inferior a 400 px:
solo pantalla: la palabra clave única se usa para evitar que los navegadores más antiguos que no admiten consultas de medios con características de medios apliquen los estilos especificados.
Sintaxis:
@media only screen and (max-width: width)
Ejemplo 2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- CSS property to set style -->
<style>
body {
background-color: lightgreen;
}
/* Media query */
@media only screen and (max-width: 400px) {
body {
background-color: green;
}
}
</style>
</head>
<body>
<h1>The @media Rule</h1>
<p>
Resize the browser window. When the width of
this document is 400 pixels or less, the
background-color is "green", otherwise it
is "lightblue".
</p>
</body>
</html>
Salida:
tamaño de pantalla superior a 400 px:
tamaño de pantalla inferior a 400 px:
Publicación traducida automáticamente
Artículo escrito por TejasviSrivastava y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA