Diseño adaptativo en píxeles con jQuery

A la hora de maquetar un diseño web no es recomendable trabajar en píxeles si queremos que éste se adapte a configuraciones de pantalla de móviles o tablets. Pero en ocasiones puede ser que tengamos que adaptar un diseño en píxeles. En mi caso la necesidad surgía porque las imágenes de mi web tenían una resolución menor a 480px de ancho siendo backgrounds de divs y necesitaba adaptar para configuraciones de pantalla más pequeñas sin que distorsionaran siendo formatos .png.

El código con jQuery es bastante simple:

//incluimos librerías jQuery
//capturamos tamaño de ventana
var ventana_ancho = $(window).width();
var ventana_alto = $(window).height();

//como la imagen principal mide 480px, regla de tres:
var var_mult = (ventana_ancho * 100) / 480;
//inicializamos
$(document).ready(function() {
//el each recorrerá todos los elementos, en este caso div, del documento
$("div").each(function(){
    //ajustamos alto
    new_height = ($(this).height() * var_mult)/100;
    $(this).css( "height", new_height );
    //ajustamos ancho
    new_width = ($(this).width() * var_mult)/100;
    $(this).css( "width", new_width );
});
});

Con este código recorremos todos los divs dándoles el nuevo tamaño.

Es importante destacar que para que funcione el width y height, de cada uno de nuestros divs, tendría que ir en píxeles ya que es lo que estamos adaptando.