Comment les requêtes multimédias Bootstrap peuvent-elles réaliser des modifications de texte évolutives pour une conception Web réactive ?

Modifications de texte évolutives avec les requêtes multimédias Bootstrap

Question :

Pour une mise en page Web réactive, comment les requêtes multimédias Bootstrap 3 peuvent-elles être utilisées pour ajuster dynamiquement tailles de police en fonction des dimensions de l'écran ?

Réponse :

Dans Bootstrap 3, les requêtes multimédias prédéfinies offrent une flexibilité pour le style en fonction de la taille de l'écran :

• @media(max-width:767px) : Extra Small (XS)
• @media(min-width :768px) : Petit (SM)
• @media(min-width:992px) : Moyen (MD)
• @media(min-width:1200px): Large (LG)

Pour modifier la taille des polices en conséquence, utilisez ces sélecteurs dans les déclarations CSS :

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

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

Améliorations de Bootstrap 4 et 5 :

Dans Bootstrap 4, le paramètre « très petit » est le par défaut, donc seuls les remplacements de médias pour les tailles plus grandes sont nécessaires :

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

Bootstrap 5 maintient cette approche et ajoute un point d'arrêt supplémentaire à 1 400 px :

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

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!