Twitter Bootstrap 3: comment utiliser les requêtes média?

Question

J'utilise Bootstrap 3 pour construire une mise en page responsive où je veux ajuster quelques tailles de police en fonction de la taille de l'écran. Comment puis-je utiliser des requêtes média pour faire ce genre de logique?

Answer 1

Voici les sélecteurs utilisés dans BS3, si vous voulez rester cohérent:

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

Mise à jour 2014-06-26: Ceci est toujours exact à partir de la version 3.2.0

Answer 2

Basé sur la réponse de bisio et le code Bootstrap 3, j'ai été en mesure de trouver une réponse plus précise pour quiconque souhaitant simplement copier et coller l'ensemble complet de requêtes média dans leur feuille de style:

 /* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Landscape phones and smaller */
@media (max-width: 480px) {

}
 

Answer 3

Si vous êtes en utilisant plus ou SCSS/SASS et que vous utilisez MOINS/SCSS version de Bootstrap, vous pouvez utiliser les variables ainsi, à condition d'avoir accès à eux. MOINS de la traduction de @plein décent, la réponse serait comme suit:

@media(max-width: @screen-xs-max){}
@media(min-width: @screen-tablet){}     /* or @screen-sm */
@media(min-width: @screen-desktop){}    /* or @screen-md */
@media(min-width: @screen-lg-desktop){} /* or @screen-lg */

Il y a aussi des variables pour @screen-sm-max et @screen-md-max, qui sont de 1 pixel de moins de @screen-md et @screen-lg, respectivement, généralement pour une utilisation avec des @media(max-width).

EDIT: Si vous utilisez SCSS/SASS, les variables de commencer avec un $ au lieu de @, de sorte qu'il serait $screen-xs-max etc.

Answer 4

Voici les valeurs de Bootstrap3:

 /* Extra Small */
@media(max-width:767px){}

/* Small */
@media(min-width:768px) and (max-width:991px){}

/* Medium */
@media(min-width:992px) and (max-width:1199px){}

/* Large */
@media(min-width:1200px){}
 

Answer 5

Voici deux exemples.

Une fois que la fenêtre devient 700px large ou moins, faites toutes les étiquettes h1 20px.

 @media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}
 

Faites tous les 20px du h1 jusqu'à ce que la fenêtre atteigne 700px ou plus.

 @media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}
 

J'espère que cela aide: 0)