ajustar tamaño letra a resolucion pantalla

AitorLopez · #1 (**permalink**) 06/09/2010, 01:58

Hola amigos. Necesito vuestra ayuda para lo siguiente.

En un ejemplo sencillo que ahora pondré, hay una cabecera y un texto en h1. Se trata de que, en funcion de que vaya cambian la resolucion del navegador, se debería de ajustar tanto la cabecera como el texto h1.

La cabecera se ajusta, de tal forma que soy voy encogiendo el navegador, si la cabecera, su ancho es el 80%, se va encogiendo para que su ancho sea siempre el 80%, pero el texto h1 siempre tiene el mismo tamaño, no se va encogiendo tambien.
Ahi va el ejemplo:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
 
<style>
body{
font-size:2em;
}
#prueba{
    height: 50%;
    width: 80%;
    background-color: #FF6633;
}
h1{
font-size:200%;
}
</style>
</head>
 
<body>
 
<div id="prueba">
 
<h1>Hola</h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
 
</body>
</html>

En esta parte

Código HTML:

Ver originalbody{
font-size:2em;
}

He probado con %, con em, con px, pero nada.

A ver si me podeis ayudar, por favor.

Gracias.

Washby · #2 (**permalink**) 06/09/2010, 03:23

No he entendido bien el problema. ¿Lo que quieres es que el H1, el "Hola" en este caso no cambie de tamaño al cambiar la resolución?

Washby · #3 (**permalink**) 06/09/2010, 03:56

Supongo que lo que quieres es mantener el tamaño de la letra igual que el tamaño del div claro.

Quizás puedas apañarte con un código JavaScript similar a este.

Código:

function Resize()
{
document.getElementById("prueba").style.fontSize = document.body.clientWidth/50 + 'px';
}
window.onresize=Resize;

document.body.clientWidth devuelve el tamaña del DIV prueba. Lo divido por 50 (a ojo, cambiarlo por lo que convenga) para que vaya a una cierta proporción y así se mantiene constante.

Y después se asigna la función al evento de cambio de tamaño.

No sé si te servirá para el caso concreto que necesites.

Saludos.

AitorLopez · #4 (**permalink**) 06/09/2010, 05:33

Hola. Gracias por tu respuesta.

El problema es que yo pensaba que debería de ser automatico, quiero decir, si tengo un div con cabecera ancho 80% y el navegador ocupa toda la pantalla, la cabecera ocupa el 80%.
Si tengo un div con cabecera ancho 80% y el navegador ocupa la mitad de la pantalla, la cabecera sigue ocupando el 80%.

Esto es correcto y funciona.

Ahora bien, no con el tipo de letra, es decir, en el mismo ejemplo de los div, cuando el navegador ocupa toda la pantalla y h1 es 20%, su tamaño será, por ejemplo, 20 px. Pero si el navegador ocupa la mitad de la pantalla y h1 sigue siendo el 20%, sigue siendo 20 px, cuando no debería ser así, deberían ser 10 px.

AitorLopez · #5 (**permalink**) 06/09/2010, 05:35

Cita:

Iniciado por Washby

No he entendido bien el problema. ¿Lo que quieres es que el H1, el "Hola" en este caso no cambie de tamaño al cambiar la resolución?

Es todo lo contrario, lo que quiero es que cambie y se ajuste a la resolucion.

Impostor · #6 (**permalink**) 06/09/2010, 05:42

Cita:

Iniciado por Washby

Quizás puedas apañarte con un código JavaScript similar a este.

Buenas, si hace la pregunta en el foro css, la respuesta deberi tratar de ser css.

Un saludo

Washby · #7 (**permalink**) 06/09/2010, 06:02

Cita:

Iniciado por Impostor

Buenas, si hace la pregunta en el foro css, la respuesta deberi tratar de ser css.

Un saludo

Hola, soy nuevo en el foro y quizás no sé bien las reglas. ¿Si alguien pregunta algo en el subforo de CSS y una posible solución es en javascript es mejor no ponerla?.

La verdad es que me pareceria bastante absurdo. Hace poco hice una pregunta en el subforo de javascript pensando que la solución sería en ese lenguaje y resulta que me ayudó alguien con CSS y me fué muy bien.

Lo importante es aprender y ayudarse aunque la solución provoque que el post estuviese mejor en otros subforo ¿no?.

Saludos.

Impostor · #8 (**permalink**) 06/09/2010, 06:35

¿Es javascript la única solución posible? Seguramente también puede ser resuelta con PHP, ajax y ya puestos, con python.

Se supone que si alguien plantea una pregunta en el foro css es porque quiere una respuesta css. En caso contrario, plantearía la cuestión en el foro javascript.

Y si, por supuesto, esto es un foro de ayuda, y por tanto, hay que dar soluciones, pero no a toda costa. No se debe dejar que un hilo en css se convierta en javascript.

Saludos¡¡

Washby · #9 (**permalink**) 06/09/2010, 06:45

Cita:

Iniciado por Impostor

¿Es javascript la única solución posible? Seguramente también puede ser resuelta con PHP, ajax y ya puestos, con python.

Se supone que si alguien plantea una pregunta en el foro css es porque quiere una respuesta css. En caso contrario, plantearía la cuestión en el foro javascript.

Y si, por supuesto, esto es un foro de ayuda, y por tanto, hay que dar soluciones, pero no a toda costa. No se debe dejar que un hilo en css se convierta en javascript.

Saludos¡¡

¿Y qué pasa si tienes una duda y no sabes con qué se resuelve? Es lo que me pasó en el tópic que mencioné antes, no sabía si abrírlo en javascript y css. Menos mal que el forero que tan amablemente me contestó no pensaba como tú y me dió una solución de otro subforo porque sino todavía estaria dándole vueltas al tema y perdiendo el tiempo.

Pero bueno, ya digo que soy novato aquí, si la filosofia general del foro es esa, la respetaré aunque no esté de acuerdo por supuesto.

Saludos.

jomaruro · #10 (**permalink**) 06/09/2010, 14:52

Hola:

Cita:

Iniciado por Washby

¿Y qué pasa si tienes una duda y no sabes con qué se resuelve?

Pues que alguien te la puede resolver amablemente, como tu has dicho, que un moderador te la mueva al foro correspondiente o que te quedes sin respuesta.

De todas maneras piensa en lo que ha dicho Impostor (y eso que se ha olvidado de java y ASP

):

Cita:

Iniciado por Impostor

¿Es javascript la única solución posible? Seguramente también puede ser resuelta con PHP, ajax y ya puestos, con python.

¿Te das cuenta de la cantidad de soluciones que podría haber a una misma duda? ¿Crees que de esa forma el foro estaría tan bien organizado?

Y dicho eso mejor será dejar las disputas y no desvirtuar el tema de AitorLopez.

AitorLopez, no puedo asegurarte estar en lo cierto pero creo que no podrás hacer lo que quieres con css porque las medidas variables dependen del tipo de letra definido. Para que lo entiendas mejor léete este capítulo del manual de librosweb.

Saludos.

AitorLopez · #11 (**permalink**) 06/09/2010, 15:47

Hola, gracias por las respuestas.

He visto el capítulo y bueno, ya lo había leido, y me encuentro con el problema de que la medida porcentual, no suele haber mucha información al respecto.

Independientemente de esto, (hablando en lenguaje ccs), yo pensaba que igual que puedes ajustar el tamaño de un div para ajustarse a la pantalla, podría ajustar el tamaño de la letra, de tal forma que se vea exactamente igual en una pantalla de estas panorámicas que hay ahora tan chulas, como en un monitor de estos antiguos con el culo gordo.

La verdad, sigo teniendo dudas, ya que entiendo que para eso debería de estar la medida porcentual, es decir, en base a algo, el 80% de ese algo es el div (y esto funciona), pues en base a otra cosa, el 15% de esa cosa sería el tamaño de la letra, sea en el monitor que sea.

Esto pensaba que se podía hacer, pero cuando me he puesto a investigarlo, no soy capaz de conseguirlo.

Espero haberme explicado ahora mejor y quedo a la espera, si es posible, de que me digais si se puede conseguir.

Gracias por vuestra ayuda. Un saludo.

kseso? · #12 (**permalink**) 06/09/2010, 16:00

AitorLopez:
Creo que lo que le falta por comprender es cuál es el referente sobre el que se calcula el tamaño de la fuente cuando se utilizan valores en /%/ o /em/.

En el caso de definir /font-size:Xz%/ el cálculo no se hace sobre el /width/ sino sobre el /font-size/ que su ancestro más próximo tenga definido o bien explícitamente o por herencia.
En caso de no encontrar ninguno se remite hasta el html, y si tampoco lo tuviese declarado, toma el que el usuario tiene definido en sus preferencias.

Espero haberme explicado.

AitorLopez · #13 (**permalink**) 07/09/2010, 00:10

Hola.

Según tu explicacion, si la entiendo bien, si pusieramos esto

Código HTML:

Ver originalbody {
    font-size:12px;
}
 
#cabecera {
    font-size: 250%;
}

¿No debería de funcionar lo que busco con este codigo?

AitorLopez · #14 (**permalink**) 08/09/2010, 02:09

Hola. Como este asunto se ha liado un poco, voy a dar por cerrado el mismo y voy a abrir uno nuevo, haciendo la pregunta de otra forma, que yo creo que se va a entender mucho mejor, si os parece bien, ok.