Foros del web, para los que viven de bits

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...
Para resolución de 1024 o superior

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

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

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

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.

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%??

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í

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

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