Comment les requêtes multimédias dans Twitter Bootstrap 3 contrôlent-elles les ajustements de mise en page réactifs ?

Ajustements de mise en page réactifs avec les requêtes multimédias dans Twitter Bootstrap 3

Les requêtes multimédias sont un excellent moyen de contrôler le style d'un site Web en fonction du taille de l'écran de l'appareil. Cela peut être utile pour créer une mise en page réactive, qui s'adaptera à différentes tailles d'écran.

Dans Twitter Bootstrap 3, les requêtes multimédias sont utilisées pour ajuster un certain nombre d'éléments en fonction de la taille de l'écran, y compris la taille des polices. Pour utiliser les requêtes multimédias, vous pouvez ajouter le CSS suivant à votre feuille de style :

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

@media (min-width: 992px) {
  body {
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

Ces requêtes multimédias ajusteront la taille de la police de l'élément body en fonction de la taille de l'écran. La première requête multimédia s'appliquera lorsque la taille de l'écran est d'au moins 768 px, la seconde s'appliquera lorsque la taille de l'écran est d'au moins 992 px et la troisième s'appliquera lorsque la taille de l'écran est d'au moins 1 200 px.

Vous pouvez utilisez des requêtes multimédias pour ajuster le style de n’importe quel élément en fonction de la taille de l’écran. Cela peut être utile pour créer une mise en page réactive qui s'adapte à différents appareils.

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!