[Résolu] Points de ruptures responsive

Bonjour à tous
Débutante en CSS je suis en train de concevoir mon site web en responsive .
J'ai lu pas mal d'article et de tuto sur le sujet mais j'aimerai savoir en gros quels sont les points de ruptures .
J'ai mis ça pour la tablette @media screen and (min-width:768px) and (max-device-width: 1024px)
et ça pour les smartphones @media screen and (min-device-width : 320px) and (max-device-width : 480px)

Je ne sais pas du tout si c'est bon , j'ai essayé avec l'outil développeur de mozilla et ça fonctionne mais quand je réduis moi même la fenêtre du navigateur cela ne donne pas du tout le même résultat ... Je suis un peu perdue qqun peut il me donner plus d'explications ?
merci par avance

Salut,

Tinkerbell006 a écrit :
quels sont les points de ruptures .
J'ai mis ça pour la tablette @media screen and (min-width:768px) and (max-device-width: 1024px)
et ça pour les smartphones @media screen and (min-device-width : 320px) and (max-device-width : 480px)

Je suis partisan du fait que les points de ruptures sont donnés par ton design plutôt que par le media. Mettre un break point quand ton design ne s'affiche plus bien et qu'il a besoin d’être réorganisé. Tu peux bien sur le faire concorder avec une affichage spécial pour les tablette mais il y a tellement de taille différentes qu'il y a forcément des fois ou ça va s'afficher en mode tablette pour un petit écran de pc ou inversement d'avoir un visu PC sur une énorme tablette...

Je ne met pas non plus de min-width, seulement les max-width. Ça permet entre autre de conserver le code commun entre la tablette et le smartphone.

Tinkerbell006 a écrit :
j'ai essayé avec l'outil développeur de mozilla et ça fonctionne mais quand je réduis moi même la fenêtre du navigateur cela ne donne pas du tout le même résultat

Heu... je vois pas bien.... normalement ca devrait donner le même résultat.

_laurent a écrit :
Heu... je vois pas bien.... normalement ca devrait donner le même résultat.

Pas forcément, la prévisualisation change le DPR aussi, as-tu une balise <meta name="viewport"> et si oui quelle valeur y-a-t'il dedans?

kustolovic a écrit :
Pas forcément, la prévisualisation change le DPR aussi, as-tu une balise &lt;meta name="viewport"&gt; et si oui quelle valeur y-a-t'il dedans?

Ah effectivement..


Sinon pour les breakpoints par défaut tu peux aussi t'inspirer d'autre comme Bootstrap :

// 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) { ... }

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints


Ou KNACSS :

// ----------------
// Breakpoints zone
// ----------------

// Warning: you should use your own values, regardless of the devices
// Best practise is Mobile First: (min-width: $breakpoint)
$tiny        : 480px !default; // or 'em' if you prefer, of course
$small       : 576px !default;
$medium      : 768px !default;
$large       : 992px !default;
$extra-large : 1200px !default;

Qui recomande d'avoir nos propre break point indépendant des devices.

(Au passage il conseille aussi de n'utiliser que du min-width, contrairement a ce que je te disais. Pour les même raison que moi, mais en faisant du mobile first.

kustolovic a écrit :


Pas forcément, la prévisualisation change le DPR aussi, as-tu une balise &lt;meta name="viewport"&gt; et si oui quelle valeur y-a-t'il dedans?

Je n'ai pas mis de meta view port , quelle valeur dois je mettre dedans ?

En fait ce qui me pose problème c'est au niveau d'une image que j'ai en largeur 100% avec du texte et un bouton dessus .... L'image sors de son parent quand je change de résolution donc je me demande bien combien je dois en mettre pour que ca reste correct

Tinkerbell006 a écrit :
Je n'ai pas mis de meta view port , quelle valeur dois je mettre dedans ?

Hello,

Tu trouveras des explications (et valeurs) ici : https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html

Tinkerbell006 a écrit :
je me demande bien combien je dois en mettre pour que ca reste correct

Pour ce genre de problèmes, je te suggère de :
1- te renseigner sur les techniques permettant de gérer les débordements : https://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html
2- de prévoir une feuille de styles de base pour le web mobile :
https://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html

Bonne lecture et bon courage !

Merci beaucoup pour les articles, cependant quelque chose me turlupine vraiment et je n'ai pas de réponses claires

Mon résultat n'est pas le même avec l'outil développeur mozilla et lorsque je reduis la fenêtre . Je ne comprend pas pourquoi .
J'ai mis le meta view port là
<meta name="viewport" content="width=device-width, initial-scale=1">

En effet, ce n'est pas normal. L'affichage devrait être quasiment le même.
Par contre, sans connaître le code ni avoir d'aperçu de la page, cela risque d'être compliqué

Voici un aperçu de ce que cela rend avec l'outil dév de mozilla en mode tablette et l'autre juste en réduisant la page
Modifié par Tinkerbell006 (02 May 2019 - 13:43)

merci beaucoup !

Je vais dire à peu de chose près les mots de Jonathan de Grafikart sur son tuto sur le responsive. Il n'y pas de résolutions standardisées comme cela a pu être le cas du temps où il n'y avait quasiment que des iPhones comme smartphones. Les comportements, les navigateurs et les résolutions natives sont trop nombreuses.

Le mieux est de trouver ses breakpoints à la mano en utilisant les outils de dev des navigateurs et la règle (ruler). Dès que le design part en cacahuète, on applique un breakpoint.

Je valide sur le fait qu'il est d'usage aujourd'hui d'appliquer des min-width plutôt que la combinaison avec max-width.

Enfin, le plus important, on dev en mobile-first, avec du flexbox et du grid et ça glisse tout seul

s2prod a écrit :

Le mieux est de trouver ses breakpoints à la mano en utilisant les outils de dev des navigateurs et la règle (ruler). Dès que le design part en cacahuète, on applique un breakpoint.

C'est pas forcément mauvais de ne pas suivre des breakpoints qui correspondent à des supports comme ceux de bootstrap par contre c'en est une mauvaise de ne pas utiliser des breakpoints fixes car en faisant cela on se retrouve avec des dizaines de breakpoints ce qui complexifie énormément les modifications futures car il faut ensuite tester pour x breakpoints indéterminés sur x sélecteurs ce qui se passe à l'écran. Autant dire que c'est impossible à tester.