Bootstrap Responsieve tekstgrootte

Ik probeer een responsieve lay-out te bouwen met bootstrap en ben momenteel enkele titels aan het definiëren met font-size:3em;

Maar als de lay-out wordt verkleind, is dit te groot. Hoe kan ik de tekst op een responsieve manier verkleinen?

Antwoord 1, autoriteit 100%

De eenvoudigste manier is om afmetingen in % of em te gebruiken. Verander gewoon de grootte van het basislettertype, alles zal veranderen.

Minder

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

Bekijk alle manieren op https://stackoverflow.com/a/21981859/406659

Je zou viewport-eenheden (vh,vw…) kunnen gebruiken, maar ze werken niet op Android < 4.4

Antwoord 2, autoriteit 42%

Nou, mijn oplossing is een soort hack, maar het werkt en ik gebruik het.

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;
}