web-dev-qa-db-fra.com

Pourquoi l'ordre des requêtes multimédias est-il important en CSS?

Dernièrement, j'ai conçu des sites qui sont plus réactifs et j'utilise fréquemment des requêtes multimédia CSS. Un modèle que j'ai remarqué est que l'ordre dans lequel les requêtes multimédias sont définies est réellement important. Je ne l'ai pas testé dans tous les navigateurs, mais uniquement sur Chrome. Y a-t-il une explication à ce comportement? Parfois, cela devient frustrant lorsque votre site ne fonctionne pas comme il se doit et que vous ne savez pas si c'est la requête ou l'ordre dans lequel la requête est écrite.

Voici un exemple:

HTML 

<body>
    <div class="one"><h1>Welcome to my website</h1></div>
    <div class="two"><a href="#">Contact us</a></div>
</body>

CSS:

body{
font-size:1em; /* 16px */
}

.two{margin-top:2em;}



/* Media Queries */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}

}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
            }
/*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}

Cependant, si j'écrivais la requête pour 1024x600 dans le dernier, le navigateur l'ignorerait et appliquerait la valeur de marge spécifiée au début du CSS (margin-top: 2em).

/* Media Queries - Re-arranged version */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}
 /*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}

Si ma compréhension des requêtes des médias est correcte, l'ordre ne devrait pas avoir d'importance, mais il semble que ce soit le cas. Quelle pourrait être la raison?

csscss3media-queriesresponsive-design
67
dsignr

C'est par conception de CSS - Feuille de style en cascade.

Cela signifie que, si vous appliquez deux règles qui entrent en collision avec les mêmes éléments, il choisira la dernière qui a été déclarée, sauf si la première a le !important marqueur ou est plus spécifique (par exemple html > body vs juste body, ce dernier est moins spécifique).

Donc, étant donné ce CSS

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

si la fenêtre du navigateur fait 350 pixels de large, l'arrière-plan sera bleu, alors qu'avec ce CSS

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

et la même largeur de fenêtre, l'arrière-plan sera rouge. Les deux règles sont en effet identiques, mais la deuxième est celle qui est appliquée car c'est la dernière règle.

Enfin, avec

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

ou

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

l'arrière-plan sera bleu (avec une fenêtre de 350 pixels de large).

118
Alessandro Vendruscolo

Ou vous pouvez simplement ajouter une largeur minimale à la ou aux requêtes multimédias les plus importantes et ne rencontrer aucun problème, quelle que soit la commande.

@media (min-width: 400.1px) and (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

En utilisant ce code, dans n'importe quel ordre, la couleur d'arrière-plan sera toujours rouge pour les résolutions d'une largeur de 400,1px-600px et sera toujours bleue pour les résolutions d'une largeur de 400px ou moins.

18
Liran H