Introduccion a web responsibe

Web compatibles con dispositivos moviles

Cuando maquetamos webs queremos siempre que nuestros diseños sean compatibles con los dispositivos actuales tales como celulares, tablets, ipats y la clásica PC.

Cuando estas tecnologías salieron al mercado muchas webs hicieron un nuevo diseño compatible con pequenos dispositivos moviles detectando el disposivo del cliente y redireccionando la pagina.

ejm: https://m.facebook.com/ es la web que ves desde un dispositivo movil. Así como facebook muchas empresas hicieron otro diseño para mostrar sus web.

Ahora gracias a CSS podemos maquetar nuestra web de modo que no tengamos que realizar otra segunda web, este tipo de webs compatibles con dispositivos moviles se denoma Responsive.

Ahora deberás pensar en el CSS de tu Web desde el dispositivo mas pequeño a la pantalla mas grande.

Lo primero que debes hacer es añadir el meta name viewport.

name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

Esto hará que en el movil no veas pequeñito las letras de tu web.

Deberás olvidarte de las medidas en pixeles a menos que sea estrictamente necesario.

para centrar el area de la pagina con una medida antes haciamos lo siguiente:

.pagearea{
	width: 900px;
	margin: 0 auto;
}

Eso en un celular se mostraría con un scroll y sobrepasaria el ancho de un celular. podemos corregir esto asi:

.pagearea{
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

 Ahora con esto le decimos que esa area se estire al tamaño de la pantalla con el que lo vean y si su pantalla supera los 900px entonces el ancho ya no seguirá estirando.

Tambien existen otros metodos como:

.pagearea{
	width: 100%;
	margin: 0 auto;
}
@media (min-width: 500px) {
.pagearea{
	width: 900px;
}
}

 @media (min-width: 500px) todo lo que ponemos dentro de esto será ejecutado en pantallas con mas de 500px

ambos metodos son muy validos pero para no complicarme tanto yo prefiero maquetar todo con max-width y poner casi todo con width:100%; (img video div etc.) y acomodarlos con float:left.

esto es lo mas básico si te acostumbras a maquetar con esto, tendras css Responsive y con mucha práctica harás web increiblemente dinámicos.

EJM esta misma web en celular lo verias asi: