Diseño de layout fluído y Responsive Design con media queries CSS

Hoy vamos a enfrentar con código la base de una web pensada en Responsive Design estilo Mostly fluid. Para este tutorial te recomiendo leer Responsive Design: Diseño receptivo y adaptivo en la Web.

Es importante definir bien el HTML5 a nivel de contenedores para tener la mayor libertad al momento de manipularlas con "media queries" en el CSS3. Este diseño está basado en 2 secciones principales que manejarán los demás contenedores hijos que se ven de color rojo y azul en nuestro mockup. Además, incluye una etiqueta de metadatos interesante: el "viewport".

Viewport

El viewport es el área visible de nuestro navegador, de tal forma que podemos manipularla como se ve, haciendo que ese área visible sea igual al ancho de dispositivo, esto es súper importante para los dispositivos móviles. Veámoslo en el ejemplo:

Código HTML5:

Código :

<!doctype html>
<html lang="es">
<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width"/>
   <title>Mayormente fluido</title>
   <link rel="stylesheet" href="patron1.css"/>
</head>
<body>
   <section>
      <h2>fila1 columna1</h2>
      <p>trolololol</p>
   </section>
   <section>
      <article class="fila1">
         <h2>fila2 columna1</h2>
         <p>trolololol</p>
      </article>
      <article class="fila2">
         <h2>fila2 columna2</h2>
         <p>trolololol</p>
      </article>
   </section>
</body>
</html>

Código CSS3:

Código :

*{margin:0;}
article{
   float:left;
   width:50%;
}
body{
   background:#C3E5F9;
   color:white;
   font-size:16px;
   font-family:Arial;
   text-shadow:1px 1px 0 black;
}
section{
   background:#12A89D;
   margin:10px auto;
   overflow:hidden;
   padding:10px 0;
   text-align:center;
   width:1000px;
}
.fila1{
   background:#B30F2A;
}
.fila2{
   background:#1C4583;
}

@media screen and (max-width:1000px){
   section{
      width:100%;
   }
}

@media screen and (max-width:700px){
   article{
      width:100%;
   }
}

Es aquí en el CSS3 donde ocurre parte de la magia del Responsive Design, pero sin nuestro hermoso HTML5 esto no sería tan fácil. En un principio maquetamos todo de una forma estática, como si no existiera Responsive Design.

De tal manera que nos queda así:

Ahora en las últimas líneas de este CSS3 ocurren cosas nuevas. Nos encontramos con un @media, esto es lo que llamamos media queries.

Media Queries

Las media queries son consultas condicionales al estado del medio (medio es todo lo que pueda estar reproduciendo la web). En este caso, me interesa detectar el ancho del navegador, que obviamente se visualiza por pantalla, de tal forma que usamos @media screen y luego debemos darle la consulta que necesitamos. En este caso, un ancho máximo, quedando:

Código :

 @media screen and (max-width:1000px)

De esta forma podemos modificar estilos para resoluciones menores a 1000px de ancho.

Dentro de los media queries se conserva toda la herencia de CSS, así que sólo debemos modificar lo necesario.

Ahora ha ocurrido algo que en nuestro navegador desktop a fullscreen no vemos, pero sí cuando redimensionamos hasta llegar a menos de 1000px de ancho.

Sí, sólo con cambiar el ancho de las etiquetas seccion de un tamaño fijo de 1000px a un tamaño dinámico de 100% hacemos magia. De igual manera hacemos una segunda consulta a los medios para resoluciones aún más pequeñas, aplicando la misma regla de los seccion, pero esta vez para las etiquetas articles, obteniendo como resultado una web hermosa a una sola columna

Y así es como logramos enfrentar el primer patrón de responsive design.

Todo el código de este ejercicio esta en github, puedes clonarlo y experimentar en base al ejemplo inicial

Manda todo tu feedback (preguntas, comentarios etc) a este milo hilo o también en forma de tweet a @LeonidasEsteban.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Diseño de layout fluído y Responsive Design con media queries CSS

Viewport

Media Queries

Publica tu comentario

o puedes...