Bootstrap Taille du texte réactif

Question

J'essaie de créer une mise en page réactive en utilisant bootstrap et je suis en train de définir certains des titres avec font-size: 3em;

Mais quand la disposition est réduite, c'est trop grand. Comment puis-je réduire en conséquence la taille du texte?

Answer 1

Le moyen le plus simple consiste à utiliser des dimensions en% ou en em. Il suffit de changer la taille de la police de base, tout va changer.

Moins

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4em;
}       

Regardez tous les moyens sur https://stackoverflow.com/a/21981859/406659

Vous pouvez utiliser les unités de la fenêtre d'affichage (vh, vw ...) mais elles ne fonctionnent pas sur Android <4.4 .

Answer 2

Eh bien, ma solution est une sorte de bidouille, mais cela fonctionne et je l’utilise.

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