Comment utiliser les Media Query CSS

Il n’est pas toujours facile de se décider sur les listes des « Media Query » à activer ou pas. Voilà une liste non exhaustive, en forme de pense-bête, des cas de figures types que vous seriez amenés à utiliser.

 

/* Smartphones (portrait et paysage) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (paysage) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait et paysage) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (paysage) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : paysage) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* PC bureau et PC portable ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Ecran large ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen et  et  et (-webkit-min-device-pixel-ratio : 1.5),
only screen et  et  et (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Si vous voulez suivre l’exemple de Twitter Bootstrap sinon, voilà la liste qu’ils utilisent :

@media(max-­‐width:767px){}
@media(min-­‐width:768px){}
@media(min-­‐width:992px){}
@media(min-­‐width:1200px){}
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?