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)

5.00 avg. rating (93% score) - 2 votes