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.
Freddie :
me siento el chavo del 8
lysergtk :
Freddie :
me siento el chavo del 8
Por el amor de los unicornios rosa, porqué?? porquéeee?? A veces escribís bien y otras no...y en el mismo tutorial....trata de concentrarte un poco cuando escribas, en serio. No quiero pensar que escribas así los mails a tu clientes
Bueno querido Leonidas, no te queda otra que escribir a la altura de tu nombre
Buen tuto! Saludos!!
Por jask05 el 26 de Abril de 2012
Saludos y gracias
Genial aporte.
Por yo el 26 de Abril de 2012
yo-blog :
Muchas gracias
Mariux :
yo-blog :
Muchas gracias
Si, échame la culpa.
antonionavajas :
Genial aporte.
Muchas gracias por la observación @antonionavajas, ya está renombrado
jask05 :
Saludos y gracias
No hace falta que uses etiquetas html5, puedes aplicar este tipo de estilos a cualquier etiqueta que funcione en bloque como divs.
el_chejin :
cool
Por jarlest el 26 de Abril de 2012
Por jarlest el 26 de Abril de 2012
Por Jorge el 27 de Abril de 2012
Por jason79 el 27 de Abril de 2012
Por leomont el 02 de Mayo de 2012
Por Jaizu el 29 de Mayo de 2012
Por jsancheb el 19 de Agosto de 2012
Por Daniel el 21 de Noviembre de 2012
Por Aridio el 06 de Abril de 2013