MooTools Brasil Tudo sobre MooTools, Javascript, CSS, Ajax

// algumas definições iniciais
var ratio = 1;		//propoção inicial, 1 = 100%
var objs = [];		//objetos que serão monitoradis e redimensionados
var id_index = 0;	//uma variável para um contador
 
/*
Classe principal, responsável por definir a cada objeto html que chamar
esta classe os estilos que podem ser redimensionados, ou seja, nem todos
os objetos html possuem todos os estilos citados abaixo, esta classe
basicamente testa e filtra os filtros compatíveis
*/
var ScalableObject = new Class({
  initialize: function(id, obj, compatible) {
    if(typeof(compatible) != 'Array')
      this.compatible = ['height', 'width', 'top',
        'left', 'font-size','margin-top',
        'margin-bottom', 'margin-left',
        'margin-right', 'padding-top',
        'padding-left', 'padding-bottom',
        'padding-right', 'line-height',
        'bottom', 'right'];
    else
      this.compatible = compatible;
    this.obj = obj;
    $(obj).store('scaleID', id);
    this.styleList = [];
    this.id = id;
    for(var i=0; i<this.compatible.length; i++) {
      if($(obj).getStyle(this.compatible[i]).indexOf('px') == -1) {
        this.compatible.splice(i, 1);
        i--;
      } else
        this.styleList.push(
          $(obj).getStyle(this.compatible[i]).split('px')[0]
        );
    }
  },
/*
o arqumento "r" é a proporção na qual o objeto em questão será
redimensionado este valor será em porcento porém em decimais,
exemplo, 50% seria 0.5, 80% = 0.8 e por aí vai
*/
  scale: function(r) {
/*
basicamente para cada estilo compatível, calcula o tamanho de
acordo com a propoção passada e redimensiona
*/
    for(var i=0; i<this.compatible.length; i++)
      if($(this.obj).getStyle(this.compatible[i]).indexOf('%') == -1)
        $(this.obj).setStyle(
          this.compatible[i], this.styleList[i] * r +'px'
        );
  }
});
// Uma verificação básica para ver se é Safari no Mac
var isMacSafari = (
  navigator.vendor &&
  navigator.vendor.indexOf('Apple') != -1 &&
  navigator.platform &&
  navigator.platform.indexOf('Mac') != -1
);
/*
Repare que para todos os outros navegadores está sendo chamado no
domready somente no Safari do Mac que é chamado no load
*/
window.addEvent(((isMacSafari) ? 'load' : 'domready'), function() {
/*
chama a função responsável por definir os objetos compatíveis
a serem redimensionados
*/
  init_resize();
  // já calcula e redimensiona os objetos
  resize();
  // aqui é que fica algo muito importante, será chamado a função
  // resize() sempre que a tela for redimensionada
  window.addEvent('resize', function() {
    resize();
  });
});
/*
Função que define quais elementos serão redimensionados,
reparem que não são todos os elementos e alguns outros
não é nem necessário utilizar todos as propriedades css
compatíveis, portanto o ideal é definir quais propriedades
css você quer redimensionar, isso é importante pois
dependendo do css original de sua página você poderá
distorcendo tudo.
*/
function init_resize() {
  // todas as divs
  var divs = $$('div');
  // todas as imagens
  var images = $$('img');
  // todos os que estão aí abaixo
  var text = $$('a', 'h1', 'h2', 'h3', 'p', 'input', 'textarea');
  for(var i=0; i<divs.length; i++)
	objs.push(new ScalableObject(id_index++, divs[i],0));
  // repare que para as imagens somente as propriedades css que
  // foram definidas aqui serão trabalhadas
  for(var i=0; i<images.length; i++)
    objs.push(
      new ScalableObject(
        id_index++,
        images[i],
        ['height','width','margin-bottom','margin-right']
      )
    );
    for(var i=0; i<text.length; i++)
      objs.push(new ScalableObject(id_index++, text[i],0));
}
function resize() {
/*
a proporção a ser definda nos objetos da página é de acordo com o
limite definido abaixo, ou seja, o ideal seria que a altura da página
fosse 735px, qualquer coisa acima ou abaixo disso será redimensionada.
O mesmo ocorre para a largura, o ideal é que a altura fosse 1000px,
qualquer coisa acima disso será redimensionado.
Abaixo será escolhido a menor proporção.
*/
  ratio = Math.min(window.getSize().y / 735, window.getSize().x / 1000);
  // repare que a propoção será no máximo 100% e no mínimo 34%
  ratio = (ratio > 1) ? 1 : (ratio < .34) ? .34 : ratio;
  // manda redimensionar todos os objetos de acordo com a proporção
  for(var i=0; i<objs.length; i++)
    objs[i].scale(ratio);
}

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("mootools", "1.2.3");
</script>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("mootools", "1.2.3");
</script>
<script src="resize.js" type="text/javascript"></script>
</head>