oct 27 2010

Adaptar el estilo de tu web a tu monitor

Una cosa que se me ha ocurrido hace poco es hacer virguerias con los estilos de la web que tengas en el navegador acutualmente. La mejor opción es hacer las cosas en la parte del cliente, ya que desde el servidor hay información, como el tamaño de la ventana en que se visualiza la web, que no se puede consultar directamente.
Usando jquery puedes aumentar o disminuir el tamaño de las fuentes de tus divs con esta sencilla funcion. Esto lo puedes hacer con las proporciones que más te gusten, aquí aparecen a partir de 900 pixels.

var w=0;
var h=0;
function res(elem,we){
 var tam=$(elem).css('font-size');
 tam=parseFloat(tam);
 if(we>900){
  var incremento=(we*100/900)-100;
  tam +=incremento;
 }
 $(elem).css('font-size',tam+"px");
}

$(document).ready(function() {
 var w= $(document).width();
 var h= $(document).height();
 $("div").each(function(i,e){
  res(this,w);
 })
});

Si simplemente te has definido distintas hojas de estilo para distintos tamaños no es nedesario que crees ninguna funcion para recorrer los elementos de la web. Simplemente debes seleccionar la hoja de estilo según el tamaño e incrustarla dinamicamente.

var w=0;
$(document).ready(function(){
 var tam;
 var w= $(document).width();
 if(w > 900){
  tam=1;
 }
 else{
  tam=2;
 }
var link=<link rel=stylesheet type=text/css href=style '+tam+'.css >;
$('head').append(link);
});

así selecionarás la hora de estilo style1.css o style2.css según el tamaño de la ventana en la que se esté viendo tu web.

Ni y ni ningun diseñador te recomendará que cambies el estilo de la web dependiedo del monitor, pero eso no significa que no tengas que hacerlo en determinadas condiciones.
El metodo CSS de jQuery te permite leer y escribir dinamicamente las caracteristicas de los elementos que tengas en la web. De hecho los efectos se hacen con ligeros cambios usando este método.