Problème en responsive

Bonjour,
Je rencontre un problème, que ça fait longtemp je cherche je n'arrive pas trouvé de solution,
Mon site ne s'adapte pas à tous les écrans.

Mobile s'affihche mais à 767px ne s'affiche pas.
Tablette s'affiche à partir 768 jusquà 991.
Pc ordinateur portable 992 s'affiche tablette au lieu desktop.


<meta name="viewport" content="width=device-width, initial-scale=1">

/*Responsive mobile*/

@media screen and (min-width: 320px) and (max-width: 767px)

{
}

/*Tablette et ordinateur portable*/
@media screen and (min-width:768px) and (max-width:992px)

{
}

Merci d’avance de votre aide.

Bonjour,
je ne comprends pas le problème de "ne s'affiche pas". Tu as testé sur de vrais appareils ou avec le module adaptatif de ton navigateur ?
Pour les mobiles, tu peux éviter le min-width et mettre simplement (max-device-width: 480px), le minimum sera de toute façon décidé par la taille des mobiles. Il n'y en a pas en 50px, à ce que je sache.
Pour le reste (min-device-width: 481px) and (max-device-width: 768px) devrait aller. Pour plus grand (min-device-width: 769px) fera l'affaire pour tous les écrans. Si ton site est fait "à l'ancienne", sans flexbox ou grid, il faudra certainement plus de @media pour ajuster.

J'ai deux sites, l'un en grid l'autre en flexbox. Pour celui en flexbox :

@media (max-width:35em) {

et c'est tout. Flexbox, des valeurs fluides pour les boîtes et les fontes font le reste.

Pour le site en grid, j'ai deux @media. Celui du dessus et un autre pour les plus grands écrans :

@media (min-width: 36em) {

Modifié par Bongota (22 Nov 2022 - 20:30)

Bonjour,

Merci pour votre réponse.

Alors j'ai testé juste avec le module adaptatif de mon navigateur Chrome et Mozilla.

J'ai utilisé flexbox, voilà le lien de mon site :
https://wiaamray.github.io/SiteBooki

Faut que je respecte les breakpoints suivant : 992 px pour les écrans d’ordinateurs et 768 px pour les tablettes, et tout ce qui est en dessous de 768 pour les téléphones portables.