Responsive Design

12

description

Nuestro compañero @andreslon nos enseña sobre "Responsive Design"

Transcript of Responsive Design

Page 1: Responsive Design
Page 2: Responsive Design
Page 3: Responsive Design

Un sitio web es sensible solo si es capaz de adaptarse a la pantalla del cliente y con la finalidad de alcanzar una correcta funcionalidad de las interfaces, buscando lograr uniformidad y estandarización al momento en que desplegamos nuestro contenido en distintos dispositivos y presentaciones.

Page 4: Responsive Design
Page 5: Responsive Design

Adapta el zoom de la pantalla automaticamente al ancho

de la web para que entre por completo en la anchura de la pantalla del dispositivo.

<meta name="viewport" content="width =

device-width, initial-scale=1, maximum-

scale=1" />

Page 6: Responsive Design

Utilizar porcentajes para definir los anchos de las columnas o contenedoresen lugar de píxeles.

img, video, object {max-width:100%;}

Page 7: Responsive Design

Permiten consultas al CSS personalizado basandose en el ancho mínimo y máximo de un navegador (min-max width).

/*Para ventanas inferiores a los 480px*/

@media screen and (max-width: 480px) {

}

Page 8: Responsive Design
Page 9: Responsive Design
Page 10: Responsive Design
Page 11: Responsive Design
Page 12: Responsive Design