Foros del Web » Creando para Internet » CSS »

ajustar tamaño letra a resolucion pantalla

Estas en el tema de ajustar tamaño letra a resolucion pantalla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/09/2010, 02:58
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
ajustar tamaño letra a resolucion pantalla

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin t&iacute;tulo</title>
  5.  
  6. body{
  7. font-size:2em;
  8. }
  9. #prueba{
  10.     height: 50%;
  11.     width: 80%;
  12.     background-color: #FF6633;
  13. }
  14. h1{
  15. font-size:200%;
  16. }
  17. </head>
  18.  
  19.  
  20. <div id="prueba">
  21.  
  22. <h1>Hola</h1>
  23. <p>&nbsp;</p>
  24. <p>&nbsp;</p>
  25. </div>
  26.  
  27. </body>
  28. </html>

En esta parte

Código HTML:
Ver original
  1. body{
  2. font-size:2em;
  3. }
He probado con %, con em, con px, pero nada.

A ver si me podeis ayudar, por favor.

Gracias.
  #2 (permalink)  
Antiguo 06/09/2010, 04:23
 
Fecha de Ingreso: mayo-2010
Mensajes: 60
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: ajustar tamaño letra a resolucion pantalla

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?
  #3 (permalink)  
Antiguo 06/09/2010, 04:56
 
Fecha de Ingreso: mayo-2010
Mensajes: 60
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: ajustar tamaño letra a resolucion pantalla

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.
  #4 (permalink)  
Antiguo 06/09/2010, 06:33
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: ajustar tamaño letra a resolucion pantalla

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.
  #5 (permalink)  
Antiguo 06/09/2010, 06:35
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: ajustar tamaño letra a resolucion pantalla

Cita:
Iniciado por Washby Ver Mensaje
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.
  #6 (permalink)  
Antiguo 06/09/2010, 06:42
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: ajustar tamaño letra a resolucion pantalla

Cita:
Iniciado por Washby Ver Mensaje
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
__________________
Revisa las FAQ's antes de disparar.
  #7 (permalink)  
Antiguo 06/09/2010, 07:02
 
Fecha de Ingreso: mayo-2010
Mensajes: 60
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: ajustar tamaño letra a resolucion pantalla

Cita:
Iniciado por Impostor Ver Mensaje
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.
  #8 (permalink)  
Antiguo 06/09/2010, 07:35
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: ajustar tamaño letra a resolucion pantalla

¿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¡¡
__________________
Revisa las FAQ's antes de disparar.
  #9 (permalink)  
Antiguo 06/09/2010, 07:45
 
Fecha de Ingreso: mayo-2010
Mensajes: 60
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: ajustar tamaño letra a resolucion pantalla

Cita:
Iniciado por Impostor Ver Mensaje
¿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.
  #10 (permalink)  
Antiguo 06/09/2010, 15:52
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ajustar tamaño letra a resolucion pantalla

Hola:

Cita:
Iniciado por Washby Ver Mensaje
¿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 Ver Mensaje
¿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.

  #11 (permalink)  
Antiguo 06/09/2010, 16:47
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: ajustar tamaño letra a resolucion pantalla

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.
  #12 (permalink)  
Antiguo 06/09/2010, 17:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ajustar tamaño letra a resolucion pantalla

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.
  #13 (permalink)  
Antiguo 07/09/2010, 01:10
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: ajustar tamaño letra a resolucion pantalla

Hola.

Según tu explicacion, si la entiendo bien, si pusieramos esto
Código HTML:
Ver original
  1. body {
  2.     font-size:12px;
  3. }
  4.  
  5. #cabecera {
  6.     font-size: 250%;
  7. }

¿No debería de funcionar lo que busco con este codigo?
  #14 (permalink)  
Antiguo 08/09/2010, 03:09
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: ajustar tamaño letra a resolucion pantalla

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.

Etiquetas: letra, pantalla, tamaño
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:59.