Passa al contingut principal

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

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>mas o menos 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.

[nota:e59e9c0139]Dentro de los media queries se conserva toda la herencia de CSS, así que sólo debemos modificar lo necesario.[/nota:e59e9c0139]

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.
Enviar comentario

Comentaris

Entrades populars d'aquest blog

10 alternativas a Cuevana para ver películas online

10 alternativas a Cuevana para ver películas online : Durante este último tiempo, en Cuevana se sucedieron varios “problemas” por los cuales hubo que ajustar algunas cosas antes de tiempo (como el rediseño del sitio), que dejaron a algunos usuarios ciertos problemas para acceder a las películas o series del portal. Pero realmente esto es algo que no incumbe a los usuarios y, como sabemos, existen muchas otras alternativas a Cuevana dando vueltas por Internet, que intentaremos presentar aquí mismo. Los sitios que repasaremos funcionan del mismo modo que Cuevana, mediante la instalación de un plugin que permite visualizar los videos de Megaupload o WUShare, entre otros servicios, en una calidad de imágen realmente excelente. Tal como sucede con el más popular servicio, todos ellos tienen publicidad que en algunos casos resulta insoportable, pero como dice Federico en DotPod “a caballo regalado no se le miran los dientes”. Alternativas a Cuevana 1. Moviezet Posiblemente el mejor clon d...

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...

Más de 50 de las mejores herramientas online para profesores

No es una exageración afirmar que hay ciento de aplicaciones educativas por ahí por la red, para todos los gustos y de todos los colores, por lo que es difícil tratar de recogerlas todas en un listado. Sin embargo, algunas destacan más que otras por su innovación y por su capacidad para conseguir adeptos, y esas son las que protagonizan la presente recopilación. Son 50 interesantes herramientas online basadas en las recopilaciones de EduArea , las muchas ya tratadas en Wwwhat’s new y las destacadas por la experiencia. 1. Dropbox : Un disco duro virtual con varios GB gratuitos y al que se accede desde casi cualquier dispositivo. Sin embargo, es muchísimo más que eso, de hecho ya comentamos 20 razones . 2. Google Drive : La evolución de Google Docs que suma a sus múltiples herramientas de creación de documentos, un considerable espacio virtual gratuito. 3. CloudMagic : Una extensión y una app multidispositivo para buscar información simultáneamente en Gmail, Twitter, Facebook, Evernote ...