1485 sujets

Web Mobile et responsive web design

Problème d'affichage des media queries

Bonjour,
J'ai un problème d'affichage avec mes media queries. La version tablette devrait s'afficher entre 768px et 991px mais elle s'affiche entre 768px et 990px. Pareille pour la version téléphone qui doit s'afficher entre 325px et 767px mais qui s'affiche entre 325px et 766px.
De plus, ce problème apparait uniquement sur mon ordinateur. J'ai essayé d'ouvrir mon site sur d'autres pc et il s'affiche correctement.
J'ai effacer les données de navigations, cache..., j'ai aussi essayé de désinstaller mes navigateurs (chrome et mozilla) puis de les réinstaller mais rien ne fonctionne...
Pouvez-vous m'aider ?


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Booki</title>
    <link rel="stylesheet" href="./css/style.css" type="text/css">
    <link rel="stylesheet" href="./css/tablet.css" type="text/css" media="screen and (min-width: 768px) and (max-width: 991px)">
    <link rel="stylesheet" href="./css/phone.css" type="text/css" media="screen and (max-width: 767px)">
    <script src="https://kit.fontawesome.com/e9938cafc4.js" crossorigin="anonymous"></script>
</head>


Le lien vers le site -> https://mathildehain.github.io/P2Booki/
Bonjour,
quel est le problème ?
Vu la multiplicité des appareils, tu ne sauras jamais sur lesquels tombe exactement la valeur de 500px. Sinon :
@media only screen and (min-width: 501px) 
 (Appareils au-dessus de 500 pixels)
@media only screen and (max-width: 500px) 
 (Appareils de 500 pixels ou moins)

Il y a même plus simple :
@media (max-width:35em)

pour tout ce qui est smartphones. Le reste se débrouille avec les valeurs fluides, étant entendu qu'on est sur du flexbox.
Sujet clos
Aller à