Tamaño del texto responsive

[rodrypaladin]

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

[g3kdigital]

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:

font-size: 3vh; /*30% la altura del dispositivo*/
/* o también*/
font-size: 3vw; /*30% el ancho del dispositivo*/
 

Con mediaqueries sería algo así:

Código CSS:

/*este estilo solo se aplicara cuando este 
en dispositivos con una anchura menor a 600px*/
 
@media (max-width: 600px) {
  .elemento {
    font-size: 1.2em;
  }
}
 

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.

[rodrypaladin]

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