Comment puis-je utiliser les requêtes multimédias pour des mises en page réactives dans Bootstrap 3 ?

Exploiter les requêtes multimédias pour des mises en page réactives dans Twitter Bootstrap 3

Dans Bootstrap 3, les requêtes multimédias jouent un rôle central dans l'adaptation des mises en page à divers écrans tailles. Par exemple, vous souhaiterez peut-être ajuster la taille des polices en fonction de la largeur de l'écran. Voici comment y parvenir à l'aide des requêtes multimédias :

Sélecteurs de requêtes multimédias pour Bootstrap 3

Pour cibler des tailles d'écran spécifiques, utilisez les sélecteurs suivants :

• @media(max-width:767px) : Écrans d'une largeur maximale de 767px
• @media(min-width:768px) : Écrans d'une largeur minimale de 768px (équivalent aux tablettes)
• @media(min-width:992px) : Écrans d'une largeur minimale de 992px (ordinateurs portables)
• @media(min-width:1200px) : Écrans d'une largeur minimale de 1 200 px (grands bureaux)

Ajustements de la taille de la police

Pour ajuster la taille des polices en fonction de la taille de l'écran, utilisez les règles CSS dans les zones appropriées. requête médiatique. Par exemple :

@media (max-width: 767px) {
  body {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 14px;
  }
}

Remarque :

Gardez à l'esprit qu'il existe des classes cachées disponibles dans Bootstrap 3 pour faciliter le débogage :

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

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!