Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Importante: ajustar tamaño de letra del body según resolución de monitor (http://www.forosdelweb.com/f53/importante-ajustar-tamano-letra-del-body-segun-resolucion-monitor-524741/)

gmansi 09/10/2007 08:35
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...

Raulmmmm 09/10/2007 10:45
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>

gmansi 09/10/2007 15:32
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...

Raulmmmm 10/10/2007 10:30
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.

gmansi 10/10/2007 12:14
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%??

bhagat 11/10/2007 06:16
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í
:-)

Raulmmmm 11/10/2007 06: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 :borracho:

gmansi 12/10/2007 08:58
Re: Importante: ajustar tamaño de letra del body según resolución de monitor
 
Cita:
Iniciado por bhagat (Mensaje 2154789)
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 30/04/2010 02:49
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.

alexk 30/04/2010 08:03
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


La zona horaria es GMT -6. Ahora son las 10:38.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.