Bootstrap 2 & 3 media query pour la personnalisation CSS

Bootstrap 2 & 3 media query pour la personnalisation CSS

Si vous utilisez le framework Twitter Bootstrap 2 ou 3, et que vous avez besoin de personnaliser le thème à travers une CSS supplémentaire, voici un exemple de média query que vous pouvez utiliser pour faire face aux différents cas.

Pour Bootstrap 3, dans le cas ou vous voudriez être « Mobile First » :

@media only screen and (min-width : 320px) {
/*vos style Custom, iPhone Retina*/
}

@media only screen and (min-width : 480px) {
/*vos style Extra Small Devices, Phones */
}

@media only screen and (min-width : 768px) {
/*vos style Small Devices, Tablets*/
}

@media only screen and (min-width : 992px) {
/*vos style Medium Devices, Desktops */
}

@media only screen and (min-width : 1200px) {
/*vos style Large Devices, Wide Screen*/
}

Toujours pour Bootstrap 3, dans le cas non « Mobile First » :

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
/*vos style Large Devices, Wide Screen*/
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
/*vos style Medium Devices, Desktops */
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
/*vos style Small Devices, Tablets*/
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
/*vos style Extra Small Devices, Phones */
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
/*vos style Custom, iPhone Retina*/
}

Et pour Boostrap 2, vous pouvez utiliser le squelette suivant :

@media only screen and (max-width : 1200px) {
/*vos style Large Devices, Wide Screen*/
}

@media only screen and (max-width : 979px) {
/*vos style Medium Devices, Desktops */
}

@media only screen and (max-width : 767px) {
/*vos style Small Devices, Tablets*/
}

@media only screen and (max-width : 480px) {
/*vos style Extra Small Devices, Phones */
}

@media only screen and (max-width : 320px) {
/*vos style Custom, iPhone Retina*/
}

N’hésitez-pas à commenter en fonction de vos expériences.

Référence : scotch.io (en)