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.

Como ajustar texto dinámico en div

Programando en javascript me he visto en la obligación de ajustar un texto que se generaba dinámicamente dentro de un div de tamaño fijo. El problema de hacer esto es que si generas el texto directamente dentro del div (una vez que el javascript de la página ha cargado) éste puede llegar a sobresalir o ser mucho más pequeño que el div según la propiedad font-size de css que le demos al texto, ya que el texto se ha cargado después de cargar el div contendor.

Mi solución es llamar a una función en javascript cuando se cargue el texto dinámico donde, al introducir el texto y el tamaño del div, la propiedad font-size dependa del tamaño de dicho div.

Para ello se crea una capa, la cual no ha de ser visible al usuario, con propiedades absolute, top: -500px; left:-500px; la razón por la cual se crea con esas propiedades es porque, como he dicho antes, no puede ser visible pero sí que debe estar visible para el documento ya que habrá que leer sus propiedades, si en vez de hacerlo así creáramos una capa en display: none; no se podría leer su tamaño debido a que está oculta.
Nótese que se trabaja con jquery el cual habrá que incluir en la página.

En el código se entiende mejor:

function sizetext (texto,w,h) {
//la capa #pretext la hacemos visible
$("#pretext").css("display", "block");
//le damos el ancho que queramos que ocupe el texto
$("#pretext").css("width", w);
//generamos nuestro texto dentro de la capa
$("#pretext").html(texto);
//hacemos un for desde tamaño de letra 30 ya que, en mi caso
//el div no será tan grande y el texto tan pequeño para
//tener una letra más grande que 30px
for (i=30;i>0;i--) {
//añadimos en la propiedad font-size el tamaño de la variable "i"
$("#pretext").css("font-size", i);
//sacamos ancho y alto del nuevo div generado
pw = $("#pretext").width();
ph = $("#pretext").height();
//como en la quinta línea ya le dimos el ancho al cual
//se tendría que ajustar, solo queda comprobar el alto
if (ph <= h) {
//yo hago un alert pero bien podría ser un return i;
//para devolver el tamaño de la letra
    alert(i);
//salimos del bucle for
    break;
}
}
//para evitar posibles errores en css ocultamos la capa
//ya que solo nos sirve para determinar el tamaño
$("#pretext").css("display", "none");
}
//llamamos a la función...
sizetext(texto, tamaño_div_ancho, tamaño_div_alto);

Ahora solo queda incluir dentro del body el div:

<div id="pretext" style="position:absolute; z-index:0; top: -500px; height: -500px; display: none;"></div>


Cualquier duda o sugerencia será bien recibida en los comentarios.