Pract.6 Una estructura responsive – curso de html y css

Estoy como decía metida actualmente, alternando y conciliando claro con otras cosas, con un curso de domestika.org de Introducción al Desarrollo Web Responsive con HTML y CSS de Javier Usobiaga, ya voy por la práctica 6 en la que tocaba crear una estructura responsive con las @media queries. La subí a mi sitio para compartirla y poderla ver también mis otros dispositivos. Conseguí la filosofía mobile first y que hiciera hasta 3 cambios de tamaño de tipo e incluso ;) añadí un background-color diferente para cada ancho de pantalla.

estructura responsive con media queries

Este sería el ancho aprox. para mostrarse en 1 tablet. Está guapo ver como se va adaptando,.. flip, flap! por aquí y por allá! Fué cuestión de dividir el 100% disponible en tantas columnas y porcentajes como requiriera cada dispositivo. Para dispositivos de más de 801px (pc) puse 4 columnas y dentro de un content de un 85% (que contemplamos para los divs interiores como si fuera un 100%) puse mis #box a un width de 22% y un margin (ambos lados) de 1.5%. La cuestión es que la suma total de width y margin haga siempre 100. Es decir: 1,5+22+1,5+22+1,5+22+1,5+22+1,5= 100. Me quedó genial!

Esta entrada fue publicada en Inicio. Guarda el enlace permanente.

Deja un comentario

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

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>