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