Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Importante: ajustar tamaño de letra del body según resolución de monitor en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/10/2007, 09:35
 
Fecha de Ingreso: octubre-2005
Mensajes: 607
Antigüedad: 12 años, 1 mes
Puntos: 7
Exclamación Importante: ajustar tamaño de letra del body según resolución de monitor

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...

Última edición por gmansi; 09/10/2007 a las 09:58
  #2 (permalink)  
Antiguo 09/10/2007, 11:45
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Importante: ajustar tamaño de letra del body según resolución de monitor

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> 
  #3 (permalink)  
Antiguo 09/10/2007, 16:32
 
Fecha de Ingreso: octubre-2005
Mensajes: 607
Antigüedad: 12 años, 1 mes
Puntos: 7
Re: Importante: ajustar tamaño de letra del body según resolución de monitor

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...

Última edición por gmansi; 09/10/2007 a las 16:44
  #4 (permalink)  
Antiguo 10/10/2007, 11:30
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Importante: ajustar tamaño de letra del body según resolución de monitor

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.

Última edición por Raulmmmm; 10/10/2007 a las 11:31 Razón: AJAX en minúsculas
  #5 (permalink)  
Antiguo 10/10/2007, 13:14
 
Fecha de Ingreso: octubre-2005
Mensajes: 607
Antigüedad: 12 años, 1 mes
Puntos: 7
Re: Importante: ajustar tamaño de letra del body según resolución de monitor

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%??
  #6 (permalink)  
Antiguo 11/10/2007, 07:16
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 4 meses
Puntos: 7
Re: Importante: ajustar tamaño de letra del body según resolución de monitor

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í
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #7 (permalink)  
Antiguo 11/10/2007, 07:36
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Importante: ajustar tamaño de letra del body según resolución de monitor

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
  #8 (permalink)  
Antiguo 12/10/2007, 09:58
 
Fecha de Ingreso: octubre-2005
Mensajes: 607
Antigüedad: 12 años, 1 mes
Puntos: 7
Re: Importante: ajustar tamaño de letra del body según resolución de monitor

Cita:
Iniciado por bhagat Ver Mensaje
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
  #9 (permalink)  
Antiguo 30/04/2010, 03:49
 
Fecha de Ingreso: diciembre-2009
Mensajes: 9
Antigüedad: 8 años
Puntos: 0
Respuesta: Importante: ajustar tamaño de letra del body según resolución de monitor

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.

Última edición por TwisterMW; 30/04/2010 a las 03:52 Razón: Error en el codigo
  #10 (permalink)  
Antiguo 30/04/2010, 09:03
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: Importante: ajustar tamaño de letra del body según resolución de monitor

TwisterMW este post tiene 3 años... no revivamos temas antiguos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 18:41.