Media-queries pour du CSS responsive

CSSIl est maintenant indispensable que tout développement web (site ou application) prenne en compte les différents périphériques : Ordinateurs, Tablettes, smartphones… Tout ces équipements possèdent des tailles d’écrans différentes et pour s’en sortir il faut créer des feuilles de styles CSS qui sont capables de s’auto adapter aux différents écrans.

Pour cela on utilise des média queries. Cela permet de créer du code CSS conditionné à certaines caractéristiques (type de média, résolution…).

Pour des d’information détaillées sur le sujet lire l’article sur le site alsacréations : https://www.alsacreations.com/article/lire/930-css3-media-queries.html.

Pour ce concerne cet article je vais vous donner les principales media-queries que j’utilise pour mes développements :

/************************************************************* small >=400px */
@media screen and (min-width: 25em) {
}

/************************************************************ medium >+768px */
@media screen and (min-width: 48em) {
}

/************************************************************ normal >=992px */
@media screen and (min-width: 62em) {
}

On définit ainsi 3 résolutions : 400px, 768px et 992px, je pars du principe que le code CSS par défaut correspond à la plus petite résolution. C’est ce qu’on appelle développer en ‘Mobile First’. On cale d’abord tout le CSS pour la résolution la plus petite (<400px) et ensuite on agrandi par paliers.

Il suffit de placer dans chaque media-querie le code CSS pour redimensionner ou replacer les éléments qui bougent en fonction de la résolution.

 

Pas de Commentaire

Qu'en pensez-vous ?

Votre formulaire contient des erreurs, merci de corriger.