Uso de media queries con css3

Como todos sabemos hoy día es muy común que las conexiones a internet no sólo se den desde una computadora (ordenador) ya sean de escritorio, notebooks, netbooks, tablets, etc. En los últimos años se ha hecho muy frecuente conectarse a la red a través de otros dispositivos, como celulares. Lo que nos obliga a pensarnos seriamente en un pequeño cambio en el diseño de los sitios para adaptarse así a las pequeñas pantallas de estos aparatos. No es lo mismo conectarse desde un monitor de 35 pulgadas que desde un pequeño celular.

Pensemos en esto: tenemos una pequeña galería con las siete portadas de los libros de Harry Potter:

  El código que usé para esto es:

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8">
    <title>Aca va el titulo de la pagina</title>
    <style type="text/css"> 
       #contenedor_imagenes {
          width: 800px;
       } 
       #contenedor_imagenes li {
          float: left;
          width: auto;
          list-style: none;
          margin: 0px 5px 5px 0px;
       }
    </style>
 </head>
 <body>
    <div id="contenedor_imagenes">
       <ul>
          <li> <img src="https://dobby.com.ar/wp-content/uploads/la_piedra_filosofal_libro.jpg" alt="" /> </li>
          <li> <img src="https://dobby.com.ar/wp-content/uploads/la_camara_secreta_libro.jpg" alt="" /> </li>
          <li> <img src="https://dobby.com.ar/wp-content/uploads/el_prisionero_de_azkaban.jpg" alt="" /> </li>
          <li> <img src="https://dobby.com.ar/wp-content/uploads/el_caliz_de_fuego_libro.jpg" alt="" /> </li>
          <li> <img src="https://dobby.com.ar/wp-content/uploads/la_orden_del_fenix.jpg" alt="" /> </li>
          <li> <img src="https://dobby.com.ar/wp-content/uploads/el_misterio_del_principe_libro.jpg" alt="" /> </li>
          <li> <img src="https://dobby.com.ar/wp-content/uploads/las_reliquias_de_la_muerte_libro.jpg" alt="" /> </li>
       </ul>
    </div>
 </body>
</html>

 

Bien nada nuevo, pero nos surge un problema y es éste:

 

Al achicar la pantalla, parte de la galería deja de verse y nos obliga a scrollear, esto en realidad no es tan grabe, pero tal vez podríamos buscar una pequeña solución para nuestro problema como achicar el contenedor de las imágenes al detectar que la pantalla se achica también y de esta manera las imágenes se irán posicionando hacia abajo.

Para ellos agregaremos dentro del código css, debajo de todo, lo siguiente:

@media screen and (max-width: 780px){
    #contenedor_imagenes {
       width: 600px;
    }
}

Con este código nosotros estamos creando una nueva regla para que cuando el ancho de la pantalla sea como máximo 780px (max-width) entonces aplique un nuevo estilo, en este caso sólo para el div con id “contenedor_imagenes” achicándolo.

Sin embargo para nuestro caso en particular esto no será suficiente ya que se puede seguir achicando la pantalla y nos obligará nuevamente a hacer scroll, para ello agregaremos más reglas para la pantalla.

Reemplacemos el anterior código por esto:

@media screen and (max-width: 780px){
    #contenedor_imagenes {
       width: 600px;
    }
} 
@media screen and (max-width: 600px){
    #contenedor_imagenes {
       width: 420px;
    }
} 
@media screen and (max-width: 420px){
    #contenedor_imagenes {
       width: 240px;
    }
}

 

Ahora sí la pantalla tiene como máximo 780 pixeles entonces quedará así:

Al no quedar más espacio el contenedor se achica y la imagen de El cáliz de fuego que antes estaba arriba de todo ahora se posiciona un bloque más abajo al no tener más espacio.

Ahora si el máximo de la pantalla es de 600px entonces el contenedor se seguirá achicando:

Sólo que la imagen que ahora debe acomodarse debajo es El prisionero de Azkaban junto con El cáliz de fuego. Y como en el anterior ejemplo las imágenes quedaron de a tres por bloque, ahora son de dos por bloque.

Y así podemos seguir con el máximo de 420px:

 

 También podríamos usar dentro de las reglas de media queries que no sólo tome el máximo de una pantalla para aplicarle otro estilo, sino el mínimo con la propiedad min-width:

@media screen and (min-width: 1024px){
    /* Estilo */
}

Así como diseñamos para resoluciones de pantalla chicas también podríamos hacerlo para pantallas grandes:

O incluso combinar un máximo y un mínimo:

@media screen and (min-width: 800px) and (max-width: 1024px){
    /* Estilo */
}

De esta manera nosotros podríamos tener una hoja de estilos para distintas resoluciones de pantalla, sólo recordar que la misma debe ir debajo de todo para que el navegador la tome.

Saludos!

Redes sociables

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    *