[Résolu] Probleme @media screen and max width

Salut

J'ai un .css qui gère mes @media queries,

Dans celui ci j'ai plusieurs @media screen and (max-width: Xpx)

Voici mon problème en image :

On voit bien (en carré orange) le problème. Je suis en screen IPHONE donc 375px
malheureusement, c'est l'autre média qui est appliquer, celui à 943px... je comprend pas.

Dois-je rajouter un "min-width" pour caler tous groupe de @media ?
Merci

min-width appliquera les CSS différemment.

C'est aussi possible avec max-width mais il faut déclarer les plus petits en dernier pour qu'ils surchargent (Les règles @media n'au aucun poids):

h1 {
  font-size: 2em;
  color: black;
}
@media screen and (max-width: 800px)  {
  h1 {
    font-size: 1.4em;
    color: red;
  }
}
@media screen and (max-width: 400px)  {
  h1 {
    font-size: 1.2em;
  }
}

à 400px et moins h1 sera rouge et de taille 1.2em.
Modifié par kustolovic (24 Aug 2018 - 13:56)

Ahhhhh, alors que moi j'ai toujours fait l'inverse...... du plus petit au plus grand

ok ok je vois, merci !
Modifié par JENCAL (24 Aug 2018 - 14:02)

Simple question d'échelle mathématique et de placement. Quand ton navigateur lit tes fichiers, la feuille de style en l'occurence, les spécificités appliquée sont celles du premier élèment rencontré et la propriété max-width fonctionne comme une échelle. Si le premier inclue les suivants tu n'auras pas accès aux suivants