Diferentes Diseños para Anchos Diferentes

Cada vez es más común en los sitios web y aplicaciones proporcionar diferentes diseños para anchos diferentes que dependan del tamaño de la ventana del usuario, o la resolución, algo de esto fue lo que vimos en uno de los artículos anteriores en Tendencias de Diseño Web 2012. Esto se puede lograr de muchas maneras, que van desde CSS hasta soluciones con Javascript.

Es un tip relativamente sencillo que encontre en Nettuts+, veremos de una forma extremadamente sencilla cómo hacer esto con un poco de jQuery, y el método resize().

Utilizando el método “resize()” de jQuery.

function checkWindowSize() {
	if ( $(window).width() > 1800 ) {
		$('body').addClass("large");
	}
	else {
		$("body").removeClass("large");
	}
}
$(window).resize(checkWindowSize);

Luego, nos dirigimos a nuestras propiedades CSS en nuestra hoja de estilos.

#container {
    width:800px;
    height:1000px;
    background:#e3e3e3;
    margin:auto;
}

/* Cambia el tamaño del contenedor por el ancho de la ventana */

.large #container {width:1000px;}
#nav {
    width:100%;
    height:100px;
    border-bottom:1px solid white;
    background:#999999;
}
.large #nav {
    float:left;
    width:200px;
    border-bottom:none;
    border-right:1px solid white;
    height:1000px;
}

Les recomiendo también un interesante artículo escrito por @mauricioux sobre Diseño responsivo, usabilidad y tiempo de carga.

Tags: ,

3 Responses to “Diferentes Diseños para Anchos Diferentes”

  1. pembe180 2 junio, 2013 at 15:31 #

    Una pregunta mas!

    esto lo podría aplicar para hacer solo las estructuras web (1200px) pc + tablet + movil?

    me tiene muerto el javascript, donde lo aprendo!

    graias

  2. Mercadeoweb 30 abril, 2013 at 23:52 #

    Muy buen articulo para nuestras paginas web.

    Gracias.

Deja un comentario