css - letra - Tamaño de texto receptivo de Bootstrap

tamaño de letra html

Question

Esta pregunta ya tiene una respuesta aquí:

• CSS puro para que el tamaño de letra responda según la cantidad dinámica de caracteres 8 respuestas

Estoy tratando de construir un diseño receptivo usando bootstrap y actualmente estoy definiendo algunos de los títulos con font-size: 3em;

Pero cuando el diseño se reduce, esto es demasiado grande. ¿Cómo puedo reducir el tamaño del texto de manera responsable?

Answer 1

Bueno, mi solución es una especie de truco, pero funciona y lo estoy usando.

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}

Answer 2

La forma más simple es usar las dimensiones en% o em. Simplemente cambie el tamaño de la fuente base, todo cambiará.

Menos

@media (max-width: @screen-xs) {
body{font-size: 10px;}
}
@media (max-width: @screen-sm) {
body{font-size: 14px;}
}
h5{
font-size: 1.4em;
}

Mire todas las formas en https://.com/a/21981859/406659

Puede usar unidades de ventana gráfica (vh, vw ...) pero no funcionan en Android <4.4