Image du titre

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)

Pas de commentaire

Publier un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Activer les notifications Super merci ! Non merci !
On which category would you like to receive?