Responsive
Web Design

Introducción

Es un enfoque de diseño web que apunta a crear sitios que provean una visualización e interacción adaptada a una amplia cantidad de dispositivos.

Responsive

Ejemplo de Responsive

Responsive Example

Box Model

Responsive Example

Mobile First

Desktop to Mobile Mobile to Desktop

Set the Viewport

Esta configuración le indica al browser que nuestro sitio es responsive, para que no haga zoom out de la página.

CSS Media Queries

Mobile Breakpoint

Mobile Breakpoint 

@media (max-width: 460px) {
    .navbar {
        /* Mobile style */
    }
}

Tablet Breakpoint

Tablet Breakpoint 

@media (min-width: 461px) and (max-width: 768px) {
    .navbar {
        /* Tablet style */
    }
}

Desktop Breakpoint

Desktop Breakpoint 

@media (min-width: 769px) {
    .navbar {
        /* Desktop style */
    }
}