Media Queries en 2020

Bonjour, comment s’y prendre avec les media queries ? Quels breakpoints choisir? Ceux proposés par google chrome dans l’inspecteur ?

Perso, je prend les breakpoints un peu au hasard en vérifiant en même temps si le résultat visuel est correct mais du coup c’est un peu le bordel dans mon code… On y retrouve du 980px, du 1200px, du 760px, etc… et c’est même pas consistant. Mais ça fonctionne, visuellement.

Quels conseils pouvez-vous m’offrir pour mener à bien une intégration responsive ?

Merci d’avance.

J’utilise les même breakpoints que ceux que Bootstrap a défini :

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

C’est consistant car j’utilise Bootstrap dans mes projets, mais si tu utilises autre chose, peut-être qu’il vaudra mieux se référer à la table adéquate.

Le framework CSS définit ses breakpoints de façon arbitraire, on dirait. Cela me conforte dans l’idée (mais je peux me tromper) qu’il n’y a pas vraiment d’autre méthode plus générique. Il faut choisir des chiffres raisonnables et s’y tenir, comme a l’air de faire Bootstrap.

Il n’y a pas de règle absolue en fait, ça dépend de ton design et du rendu recherché.

Si tu te retrouves à avoir trop de breakpoints il faut peut-être revoir le design, ou automatiser une partie de la génération de CSS, par exemple avec un préprocesseur.

Les breakpoints de Bootstrap sont biens… si tu utilises Bootstrap sans trop le customiser. Ce n’est pas un exemple pour un projet qui ne l’utilise pas, même si ça peut fournir une base de travail (ou moins le temps de voir ce que ça donne pour ajuster ensuite).

Je suis loin d’être expert en webdesign, mais j’en profite pour partager ce lien que je trouve intéressant sur le sujet : https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/