Importante: ajustar tamaño de letra del body según resolución de monitor

[gmansi]

Importante: ajustar tamaño de letra del body según resolución de monitor

Bien, supongamos que creamos un sitio en CSS y queremos que

Para resolución de 800 o menor...

Código:

body {
margin:0px; padding:0px;
text-align:center;
font:76% tahoma, verdana, sans-serif;
background:#e0e0e0;
color:#000000;
}

Para resolución de 1024 o superior

Código:

body {
margin:0px; padding:0px;
text-align:center;
font:100% tahoma, verdana, sans-serif;
background:#e0e0e0;
color:#000000;
}

En definitiva queremos que si la resolución es de 800 o menor el font del body (y en consecuencia los que se basen en este valor) sea de 76% y para resoluciones de 1024 o mayores el font del body sea de 100%.

Yo se como detectar la resolución con Java Script, y también como cargar en una variable el valor 76 o 100 según sea el caso...

...pero cómo le paso ese valor a la orden en CSS?


El código Java Script puede ser algo así

Código:

<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024))
{
var tamanio;
tamanio = 100;
}
else
{
tamanio = 76;
}
//-->
</SCRIPT>

Aclaro que es para instrumentar dentro de un Blog de Blogger por lo tanto no me sirve la opción de tener 2 CSS diferentes y llamar a una u otra de acuerdo a la resolución....

O sea esto no me sirve:

Código:

<script language="JavaScript1.2">
if ( screen.width == 1024){
document.write('<link href="css/pagina_1024.css" rel="stylesheet" type="text/css" media="screen" />');
}
else {
document.write('<link href="css/pagina_default.css" rel="stylesheet" type="text/css" media="screen" />');
}

Necesito una solución dinámica, dentro del mismo CSS y no se si se puede o no...

[Raulmmmm]

Pues fácil, aunque no puedas utilizar archivos css, puedes usar la etiqueta style:

Código HTML:

<script>
if ( screen.width == 1024){
document.write('<style>
body {
margin:0px; padding:0px;
text-align:center;
font:100% tahoma, verdana, sans-serif;
background:#e0e0e0;
color:#000000;
}</style>');
}
else {
document.write('<style>
body {
margin:0px; padding:0px;
text-align:center;
font:76% tahoma, verdana, sans-serif;
background:#e0e0e0;
color:#000000;
}</style>');
}
</script> 

[gmansi]

Raulmmmm gracias por la ayuda

Estoy seguro que tu código funciona para HTML pero lo que yo necesito es colocar ese código o similar dentro del CSS.

Blogger gestiona todo el blog en base a la plantilla y desde allí mismo debo condicionar el tamaño de letra en base a la resolución de pantalla, de manera tal que abriendo cualquier página del blog, no solo la principal, se realice el ajuste de texto...

[Raulmmmm]

Pues creo que eso ya no se podría hacer con Javascript, tendría que ser con AJAX, porque necesitarías PHP para escribir sobre el archivo CSS. Si se me ocurre algo lo posteo.

[gmansi]

Gracias me comentaron que se podría solucionar con algo como

outer-wrapper {
font:100% tahoma, verdana, sans-serif;
.................

Y luego variar los valores con

document.getElementById('outer-wrapper').style.fontSize='100%'

o

document.getElementById('outer-wrapper').style.fontSize='76%'

Puede resultar algo así?

Es decir, en el CSS llamar a un Java Script que me devuelva la resolución de monitor del usuario y en base a ese dato asignar 100% o 76%??

[bhagat]

O me he perdido, o esto puede ser resuelto de una manera muy simple.

si no es así pido disculpas, pero a lo que me refiero es a las medidas relativas.

http://www.ignside.net/man/css/unidades.php

espero que los tiros vayan por ahí

[Raulmmmm]

Bueno, pues podría ser de esa manera que tú dices. Y que el archivo CSS debe ser leído así:
if (document.all){
miRegla = document.styleSheets[0].rules;
}else{
miRegla = document.styleSheets[0].cssRules;}
Luego ya no sé mas

[gmansi]

Iniciado por bhagat

O me he perdido, o esto puede ser resuelto de una manera muy simple.

si no es así pido disculpas, pero a lo que me refiero es a las medidas relativas.

http://www.ignside.net/man/css/unidades.php

espero que los tiros vayan por ahí

Hola, si, con unidades relativas quiero resolverlo pero el problema es que no es para un sitio común y corriente que diseñas desde cero tu mismo, sino para un Blogger de Blogspot, entonces tengo de alguna manera que en la misma hoja de estilos bifurcar a 76% o 100% de acuerdo a la resolución del monitor. No puedo usar php porque la solución tiene que ser dentro de la planilla. Si podría usar Java Script pero no se como pasarle la variable....

Seguiré investigando.

Gracias

[TwisterMW]

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.

[alexk]

TwisterMW este post tiene 3 años... no revivamos temas antiguos