Responsive Design

Preview:

DESCRIPTION

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

Citation preview

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.

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" />

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

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

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) {

}