Bonjour à tous,

Je suis débutant dans la programmation et je suis entrain d'apprendre les media queries pour le responsive design des sites web.

Mes problèmes,

1. C'est que je ne connais pas la résolution des mobiles, tablettes et ordinateurs pour les medias queries

2.Et quand je code avec différentes résolutions avec les medias queries pour les mobiles, tablettes et ordinateurs, elles se mélangent toutes. Un exemple : quand je déplace un bouton sur ma page avec la résolution pour les ordinateurs, elles se modifient sur toutes les autres résolutions.

Pouvez-vous m'aider svp 

Bien Cordialement

Yoann Masson

Bonjour,

Évitez les titres de sujet avec "problème", si vous postez on se doute que vous avez un problème, inutile de l'indiquer dans le titre cela n'apporte aucune information quand au contenu du sujet.

---

1. Voici un exemple de dimension. Je te recommandes toutefois de faire du mobile-first et d'indiquer une dimension en fonction des break point de ton design. (la ou tu as des cassures d'affichage) En effet il n'est pas toujours utile d'indiquer toutes les dimensions des media queries.

2. Je ne comprends pas bien "elles se mélangent toutes". Avec du code ce sera certainement plus clair.

Bonjour,

Ce que te suggère AbcAbc6 est exactement ce qu'il faut que tu saches. Pour être plus précis, voici des tailles que tu peu prendre comme "base" :

X-Small		<576px
Small		≥576px
Medium		≥768px
Large		≥992px
Extra large		≥1200px
Extra extra large		≥1400px

Mobile : X-Small à Medium

Tablette : Medium à Large

Ordinateur : Extra large et Extra extra large

-
Edité par Lord Morpheus 29 juillet 2021 à 21:54:50

Hello,

Il n'y a pas vraiment de règles, et c'est d'ailleurs pourquoi tu ne trouves pas de "sources de vérité absolue". C'est une histoire de préférences et de compromis.

Certaines personnes vont avoir tendances à prendre un device et à fixer le breakpoint à ce niveau la (par exemple, tout ce qui est moins grand qu'un iPhone {inserer le dernier numéro de version} sera du mobile, etc...) Dans le cas de l'iphone 12, on sait que son viewport fait environ 375px. Mais que se passe-t-il si l'iphone 13 arrive et que la taille de son viewport est plus grande ? Est ce que tu changerais ton breakpoint ou pas ?

Je suis personnellement de l'avis de Joshua Comeau qui consisterait à éviter de s'attarder sur une taille fixe prédéfinis par rapport à un device existant, et au contraire, de se baser sur une size complètement arbitraire entre deux tailles de devices mainstream. Par exemple, on sait que l'iphone 12 est en 375 et qu'une small tablet android c'est ~600, pourquoi ne pas essayer de définir un breakpoint à 500 de large ?

Cet article propose une utilisation de breakpoints différents de ce qu'on a l'habitude de voir pour la résolution d'un problème que l'auteur a rencontré. C'est en anglais, mais c'est vraiment pas mal https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/ . Dans l'article en question, la personne a trouver son bonheur en utilisant les breakpoints suivants (en SASS)

$phone-upper-boundary: 600px;
$tablet-portrait-upper-boundary: 900px;
$tablet-landscape-upper-boundary: 1200px;
$desktop-upper-boundary: 1800px;

Et pour une side note, je trouve intéressant de definir les breakpoints en rem, au cas ou l'utilisateur déciderait de changer la font size par défaut de son navigateur (rendre le tout un peu plus accessible)

Je sais pas trop si ma réponse t'a aidé, en tout cas, c'est un petit dump de mon cerveau sur le topic