Jeroen van Meerendonk

Más responsive design

A falta de retoques, ya se puede apreciar lo que es el responsive design. Como dije, ya no se trata de tener diferentes versiones para diferentes dispositivos (antes a veces tenías una versión normal y una “versión móvil”). Con CSS3 se puede adaptar un diseño al momento. Para ver el efecto, redimensionad la ventana de vuestro navegador. Chachi, uh? Es muy básico en mi caso, porque tampoco tengo muchos elementos, pero se pueden conseguir muchas cosas.

Para implementarlo es sencillo, aunque hace falta tener una estructura bastante bien organizada y lógica. Si programas bien desde el principio no tendrás problemas para esto.

Sólo tienes que añadir después del código CSS las diferentes media queries que quieres usar.

@media screen and (min-width: 740px) and (max-width: 979px) {

	/* Para los estilos en dispositivos menores de 980px */
	body {
		derp derp...
	}

}

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

	/* Para los estilos en dispositivos menores de 739px */
	/* En mi caso he usado este para poner los widths
	líquidos, así se adaptan. */

}

Y dentro de ellas, las modificaciones que quieres que sufran los elementos cuando se encuentren dentro de la resolución indicada.

Podéis echar un ojo a cómo lo he montado en mi CSS. En los próximos días indagaré sobre buenas prácticas y cómo optimizar la carga de datos, porque sé que se puede mejorar, y cuáles son las medidas más utilizadas (normal, tablet, smartphone, etc). La idea es hacer un tutorial en castellano que explique todas las posibilidades.