Responsive Desing

¿Que es responisive design?

Es una serie de estategias que llevan a que el contenido de un poyecto web esté optimizado para ver en cualquier dispositivo.

Media querys y break points

Break Points

Son dimensaiones en los que se determina el punto de partida para que un contenido se reorganice

Media querys

Es un selector de CSS que permite colocar un break point. Son similares a lo siguiente:

@media (min-width: 480px{ ... }).

Esto quiere decir: cuando la pantalla (media) sea mas pequeña (min-width) que 480px, se tomarán los estilos que están dentro de los corchetes

La mejor práctica para colocarlos es desde el head de HTML del siguiente modo:

<link rel="stylesheet" href="style.css">*

<link rel="stylesheet" href="tablet.css" media="screen and (min-width:768)">

<link rel="stylesheet" href="desktop.css" media="screen and (min-width:1024)">

*El primer enlace a la hoja de estilos (el CSS principal) debe ser para mobiles, de este modo se aplica el método Mobile First

Estrategias de maquetación para responsive design

A continuacion verás 3 estrategias para elegir, dependiendo del proyecto, y realizar responsive design en un proyecto web

• Mostly Fuid: hace que todo el contenido empiece como columnas y cuando empiezan a crecer el espacio (o ancho de pantalla) las columnas dependiendo de los contenidos se vayan reacomodando en filas.
• Layout Shifter: Esta estragía hace que ciertos bloques se reacomoden, para esto se necesita acomodar elementos dentro de contenedores padre.
• Column Drop: Al tener todo en columnas para mobile first y empezar a hacer más grande el viewport, los contenedores se van ajustando de modo que se van organizando en filas uno tras otro segun su contenido.