Hoy en día esta muy de moda el diseño responsive o adaptativo.
He decidido hacer este pequeño tutorial para aclarar que no es necesario incrustar una librería como Skeleton o como Bootstrap para conseguir este efecto de adaptación a todos los dispositivos. Tan solo hay que hacer uso de las media queries.
Lo tratare de explicar por pasos:
Paso 1. Estructura y Metas
Lo primero de todo es tener muy en cuenta como funciona un navegador web de smartphone a grandes rasgos. Cuando hace una carga de una web, trata de buscar si existe alguna recomendación de ancho para utilizar. De no ser así busca la que mejor se adapta. Si no puede hacerlo, muestra la web tal cual la veríamos en un navegador tradicional.
Para evitar esto, haremos uso de una de las meta-etiquetas, en concreto, viewport.
<meta name="viewport" content="width=device−width, initial−scale=1.0" />
Pero como no, no podría ser de otra manera, si Internet Explorer no tuviese algo que decir. Si amigos, si, Internet Explorer 8 no soporta de manera nativa los media queries. Tenemos que forzarlos utilizando javascript, usando media-queries.js o respond.js:
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> < ![endif]-->
Paso 2. El groso HTML
En este ejemplo hemos creado una simple estructura con un header, content, sidebar lateral derecho y un footer. El header es fixed y tiene una altura de 180px. El content tiene una anchura de 600px y el sidebar de 300px.
<div id="header"> <h1>Header</h1> <p>Tutorial por <a href="http://www.rubencarracedo.com/">Ruben Carracedo</a>.</p> </div> <div id="content"> <h2 align="center">Contenido</h2> <p>texto</p> <p>texto</p> <p>texto</p> <p>texto</p> <p>texto</p> <p>texto</p> <p>texto</p> <p>texto</p> <p>texto</p> <p>texto</p> </div> <div id="sidebar"> <h3 align="center">Sidebar</h3> <p>texto</p> <p>texto</p> </div> <div id="footer"> <h4>Footer</h4> </div>
Paso 3. CSS utilizando las Media Queries.
Esta es la clave. No lo dudéis amigos, si esto no se hace bien, nada de lo anterior servirá para nada. Gracias a estas queries CSS3, le indica al navegador, como ha de renderizar la pagina.
Primero ponemos las reglas que estructuran la mayor anchura de las que vamos a contemplar. Recomiendo que como mínimo sean 3: 980px, 700px y 480px. Estas son las medidas estandar para smartphones, tablets y el resto.
Como veis, el valor de la anchura lo cambiamos de pixel a porcentaje, de este modo los contenedores fluirán, en lugar de estar estáticos.
/* para 980px o menos */
#pagewrap {width: 94%:}
#content {width: 65% ;}
#sidebar { width: 30%;}
Para 700px o menos el #content y #sidebar pasa a una anchura auto y se elimina el float así tendrá una anchura completa, al 100%.
/* para 700px o menos. Con auto width se hace un reset al container. */
#content {
width: auto;
float: none ;}
#sidebar { width: auto;
float: none;}
Para 480px o menos resetea el #header a auto, cambia la fuente h1 a 24px y esconde la barra lateral:
/* para 480px o menos */ #header { height: auto;}
h1 {font-size: 24px ;}
#sidebar { display: none;}
Podéis ver un ejemplo del diseño responsive funcional hecho por mi. Disfrutadlo
Compartid el artículo en vuestras redes sociales y no olvidéis comentar!!!
Ruben Carracedo Cano
Latest posts by Ruben Carracedo Cano (see all)
- maqueta texto en columnas solo con css3 - 26 febrero, 2014
- Tutorial para optimizar imagenes para SEO - 26 febrero, 2014
- Analisis y reseña de SmartWatch Pebble - 30 enero, 2014
Deja un comentario