El CSS Media Query se puede usar para hacer que un HTML «div» responda. Las consultas de medios permiten a los usuarios cambiar o personalizar las páginas web para muchos dispositivos como computadoras de escritorio, teléfonos móviles, tabletas, etc. sin cambiar las marcas. Usando la consulta de medios, el usuario puede cambiar el estilo de un elemento en particular para diferentes tamaños de pantalla.
La regla CSS @media consta de un tipo de medio y puede tener una o más expresiones, que pueden dar como resultado valores como «verdadero» o «falso».
Sintaxis:
@media not|only mediatype and (expressions) {
// Your CSS codes
}
El siguiente elemento de ventana gráfica debe incluirse en la sección «head» del archivo HTML para que funcione la página web receptiva.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
Ejemplo: En el siguiente ejemplo, los tres bloques HTML «div» están alineados horizontalmente. Pero siempre que el tamaño de la pantalla se reduzca por debajo de «500 px», los tres bloques se alinearán verticalmente automáticamente. La propiedad de ancho para el elemento «div» en la consulta @media para el tamaño de la pantalla se establece en menos o igual a «500px».
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
div {
margin: 10px;
}
.first {
width: 25%;
display: inline-block;
background-color: green;
}
.second {
width: 25%;
display: inline-block;
background-color: blue;
}
.third {
width: 25%;
display: inline-block;
background-color: yellow;
}
@media screen and (max-width: 500px) {
.first,
.second,
.third {
width: 70%;
}
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>Responsive div using css.</p>
<div class="first">
<p>First block</p>
</div>
<div class="second">
<p>Second block</p>
</div>
<div class="third">
<p>Third block </p>
</div>
<p>
The media query will only apply
if the media type is screen
and the viewport is equal to
or less than 500px
</p>
</body>
</html>
Producción:
-
En el tamaño de ventana original, los tres bloques están alineados horizontalmente.
-
Cuando el tamaño de la pantalla se reduce a «500px», los tres bloques se colocan verticalmente.
De manera similar, uno puede agregar o cambiar varios estilos para un elemento HTML en particular para diferentes tamaños de pantalla agregando código CSS en la sección de consulta @media como se muestra en el ejemplo anterior.
Publicación traducida automáticamente
Artículo escrito por deepak710agarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA