Foros del Web » Creando para Internet » CSS »

Tamaño del texto responsive

Estas en el tema de Tamaño del texto responsive en el foro de CSS en Foros del Web. Buenas compis, estoy trasteando con bootstrap pero me encuentro con un problemilla. He dado a los h1 y h2 un font-size de pixeles, pero obviamente ...
  #1 (permalink)  
Antiguo 23/01/2016, 10:49
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 12 años, 4 meses
Puntos: 468
Tamaño del texto responsive

Buenas compis, estoy trasteando con bootstrap pero me encuentro con un problemilla.

He dado a los h1 y h2 un font-size de pixeles, pero obviamente al entrar desde móvil estos encabezados siguen estando a esos px, Me gustaría que dependiendo del tamaño del dispositivo o del navegador, el tamaño de los encabezados sea proporcional, o que sea uno fijo pero inferior.

Me gustaría hacerlo en bootstrap si es posioble, pero la información que he encontrado no consigo que funcione. Aunque si es muy fácil conseguirlo sin necesidad de bootstrap no habría problema de implementarlo, pero la verdad es que no lo consigo.

Espero puedan echarme un cable. Un saludo
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #2 (permalink)  
Antiguo 23/01/2016, 22:22
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 8 años, 9 meses
Puntos: 39
Respuesta: Tamaño del texto responsive

El que uses bootstrap o no, no afecta, la solución es usar mediaqueries aunque si quieres que se adapte siempre al tamaño del dispositivo usa las medidas vh o vw, así:

Código CSS:
Ver original
  1. font-size: 3vh; /*30% la altura del dispositivo*/
  2. /* o también*/
  3. font-size: 3vw; /*30% el ancho del dispositivo*/

Con mediaqueries sería algo así:

Código CSS:
Ver original
  1. /*este estilo solo se aplicara cuando este
  2. en dispositivos con una anchura menor a 600px*/
  3.  
  4. @media (max-width: 600px) {
  5.   .elemento {
  6.     font-size: 1.2em;
  7.   }
  8. }

Aunque puedes combinar las dos técnicas. Hay otras medidas dinámicas parecidas: vmax y vmin, la idea es que experimentes.

Por cierto, aunque sí se puede y eres libre de hacerlo o no, lo recomendado es que solo declares un font-size en pixeles una única vez en el body y en los demás elementos uses la medida relativa em o rem.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital
  #3 (permalink)  
Antiguo 24/01/2016, 07:08
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 12 años, 4 meses
Puntos: 468
Respuesta: Tamaño del texto responsive

Lo de los mediaqueries lo he probado pero había usado el tamaño del interior en px, probaré de esta forma con el em

En el body no tengo asignado ningún tamaño en px, pues solo modifico los tamaños de los encabezados h1,h2,h3 y h4, y ahí si le cambiaba el font-size a pixeles
__________________
No te olvides de dar +1 a quien te echa un cable ;)

Etiquetas: bootstrap
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:33.