Layouts¶

En la actualidad es importante que nuestros diseños se vean bien en todos los dispositvos. Para ello se han creado en los últimos año nuevas formas de representar los Layouts: flex y grid.

También desde CSS nos permite preguntar en qué resolución estamos trabajando para adaptar el css a la pantalla.

Responsive

Media query¶

Explicación de media query https://developer.mozilla.org/es/docs/CSS/Media_queries

De forma guiada vamos a hacer una web que cambie de color según 3 tamaños: móvil, tablets y escritorio

Tarea¶

Realiza una página con 10 media queries desde 100px hasta 1000px, en cada mediaquery la página se irá poniendo más roja.

En la página habrá una imagen, el contenido de esta imagen cambiará para antes de 300px, antes de 600px, antes de 900px y el resto

Las imágenes deberán ser distintas.

Código ayuda¶

/*Móvile*/
@media (min-width:320px)  {  }
@media (min-width:481px)  {  }

/*Tablets y ordenadores antiguos*/
@media (min-width:641px)  {  }
@media (min-width:961px)  {  }

/*Escritorio*/
@media (min-width:1025px) {  }
@media (min-width:1281px) {  }

Teoría Flexbox¶

Explicación de los elementos https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Tarea¶

Utiliza el editor Codepen para modificar el ejemplo 1 anterior, cambiar el color de los elementos y hacer que se muestren en columna.

Copia el ejemplo 2 anterior para hacer un diseño responsive con un menú y los colores a tu elección.

Juegos¶

https://flexboxfroggy.com/#es http://www.flexboxdefense.com/

Teoría Grid¶

Explicación de los elementos https://css-tricks.com/snippets/css/complete-guide-grid/