Comment puis-je ajuster de manière réactive la taille des polices dans Bootstrap à l'aide de requêtes multimédias ?

Utilisation de requêtes multimédias pour ajuster la taille des polices de manière réactive dans Bootstrap

Bootstrap 3 fournit des requêtes multimédias pour permettre aux développeurs de modifier les styles en fonction de la taille de l'écran. Pour ajuster la taille des polices à l'aide de requêtes multimédia :

Bootstrap 3

1. Utilisez la requête multimédia suivante sélecteurs :

@media (max-width: 767px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

2. Exemple :

@media (min-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
}

Bootstrap 4

1. Utilisez le suivant sélecteurs :

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

2. N'oubliez pas que "très petit" est la valeur par défaut, codez donc d'abord les tailles XS, puis remplacez-les par des requêtes multimédias.

Bootstrap 5

1. Utilisez ce qui suit sélecteurs :

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}

2. Exemple :

@media (min-width: 992px) {
  h1 {
    font-size: 1.75rem;
  }
}

Remarque : Ces sélecteurs sont restés cohérents depuis les versions 3.4 de Bootstrap. 1, 4.6.0 et 5.3.0.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!