Andrés Londoño, analista de software y líder de Avanet, explica cómo adaptar automáticamente el zoom de la pantalla al ancho de la web. Se recomienda usar porcentajes para definir anchos y maximizar el tamaño de imágenes y videos. También se presentan consultas CSS basadas en el ancho del navegador y la orientación del dispositivo.

2. Andrés Londoño
Analista de Software
Miembro / Líder de Avanet
andreslon@outlook.com
@andreslon
http://andreslon.com

9. Adapta el zoom de la pantalla automáticamente 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" />

10. Utilizar porcentajes para definir los anchos de las
columnas o contenedores
en lugar de píxeles.
img, video, object {max-width:100%;}

11. Permiten consultas al CSS personalizado basándose 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) {
}
/*Para dispositivos con orientacion Vertical */
@media screen and (orientation:portrait) {
}

12. Andrés Londoño
Analista de Software
Miembro / Líder de Avanet
andreslon@outlook.com
@andreslon
http://andreslon.com