Pues siempre puedes declarar un objeto en un script que leeras al principio en el head de esta forma:
Código HTML:
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" language="javascript" src="script.js"></script>
</head> Fíjate que también tengo definida una hoja de estilos. Ahora imagina que quisiera adaptar una de las capas por ejemplo la #general a la resolución, pues el código que podrías meter en el script sería el siguiente:
Código:
function resolution(){
var obj1 = document.getElementById('general');
switch(screen.width){
//anchura 1280 px
case 1280:
//altura 1024 px
if(screen.height == 1024)
{
obj1.style.left = '128px';
obj1.style.right = '128px';
obj1.style.top = '51px';
obj1.style.height = '973px';
obj1.style.fontsize = '18px';
}
//altura 960 px
else if(screen.height == 960)
{
obj1.style.left = '128px';
obj1.style.right = '128px';
obj1.style.top = '48px';
obj1.style.height = '912px';
obj1.style.fontsize = '18px';
}
//altura 800 px
else if(screen.height == 800)
{
obj1.style.left = '128px';
obj1.style.right = '128px';
obj1.style.top = '40px';
obj1.style.height = '760px';
obj1.style.fontsize = '18px';
}
//altura 768 px
else if(screen.height == 768)
{
obj1.style.left = '128px';
obj1.style.right = '128px';
obj1.style.top = '38px';
obj1.style.height = '730px';
obj1.style.fontsize = '18px';
}
//altura 720 px
else if(screen.height == 720)
{
obj1.style.left = '128px';
obj1.style.right = '128px';
obj1.style.top = '36px';
obj1.style.height = '694px';
obj1.style.fontsize = '18px';
}
break;
//anchura 1152 px
case 1152:
if(screen.height == 864)
{
obj1.style.left = '115px';
obj1.style.right = '115px';
obj1.style.top = '43px';
obj1.style.height = '821px';
obj1.style.fontsize = '16px';
}
break;
//anchura 1024 px
case 1024:
if(screen.height == 768)
{
obj1.style.left = '102px';
obj1.style.right = '102px';
obj1.style.top = '38px';
obj1.style.height = '730px';
obj1.style.fontsize = '14px';
}
break;
//anchura 960 px
case 960:
if(screen.height == 600)
{
obj1.style.left = '96px';
obj1.style.right = '96px';
obj1.style.top = '30px';
obj1.style.height = '570px';
obj1.style.fontsize = '13px';
}
break;
//anchura 800 px
case 800:
if(screen.height == 600)
{
obj1.style.left = '80px';
obj1.style.right = '80px';
obj1.style.top = '38px';
obj1.style.height = '570px';
obj1.style.fontsize = '12px';
}
break;
default:
window.alert("Resolución no definida, es posible que la web no se vea bien");
}
}
Luego evidentemente, llamaríamos la función desde el body así:
Código HTML:
<body onload="resolution();">
La estructura básica parte de las propiedades screen.height y screen.width, que nos devuelven la resolución actual en px.. Yo aquí he definido las resoluciones comunes, pero se podrían añadir más casos a la estructura switch/case..
No se si es la solución más óptima, pero lo que si que se, es que a mi me funciona.
PD: si quisieras ajustar más de una capa, simplemente tienes que definir las variables de los objetos de las demás capas, i tratarlos dentro de cada caso igual que hemos hecho con general.