Introducción a Responsive Design

Responsive Design#mejorFront

Estoy aprendiendo Responsive Design con @LeonidasEsteban

#mejorFront

¿Qué es Responsive Design?

• Son todas esas técnicas o patrones que usamos para adaptar nuestras aplicaciones web a la mayor cantidad de dispositivos posibles. #mejorFront

Técnicas• Medidas relativas

• Displays

• Videos

• Imágenes

• Sliders

Viewport

• El Area visible del navegador.

• https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag

Media queries

• Consultas hechas al estado del dispositivo como su ancho, alto o color

• https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag

Densidad de pixel

• Pantallas más pequeñas con resoluciones gigantes

• http://bjango.com/articles/min-device-pixel-ratio/

Gestos

Patrones de diseño

Mostly Fluidhttp://www.antarcticstation.org/

Column Drophttp://modernizr.com/

Layout Shifterhttp://foodsense.is/

Tiny Tweakshttp://futurefriendlyweb.com/

Off CanvasMobile Apps