Quelles sont les règles CSS media query se chevauchent?

Quelles sont les règles CSS media query se chevauchent?

Cascade.

@media les règles sont transparentes à la cascade, de sorte que lorsque deux ou plus de deux @media règles de correspondance dans le même temps, le navigateur devrait appliquer les styles, dans toutes les règles de ce match, et de résoudre la cascade en conséquence.¹

Ce qui va se passer, à travers l'appui des navigateurs, à exactement 20em, et 45em?

Exactement 20em large, votre première et de la deuxième requête de média sera à la fois du match. Les navigateurs appliquer des styles à la fois @media règles et cascade en conséquence, donc si il y a un conflit de règles qui doivent être remplacées, ce dernier a déclaré que l'on gagne (comptabilité spécifique des sélecteurs, !important, etc). De même pour la deuxième et la troisième requête de média lorsque la fenêtre est exactement 45em de large.

Compte tenu de votre code d'exemple, avec quelques règles de style ajouté:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

Lorsque le navigateur de la fenêtre d'affichage est exactement 20em large, ces deux requêtes de média renvoie la valeur true. Par la cascade, display: block remplace display: none et float: left va s'appliquer sur n'importe quel élément avec la classe .sidebar.

Vous pouvez considérer que l'application des règles comme si les requêtes de média n'étaient pas là pour commencer:

.sidebar { display: none; }
.sidebar { display: block; float: left; }

Un autre exemple de la façon dont la cascade a lieu lorsqu'un navigateur correspond à deux ou plusieurs requêtes de média peuvent être trouvés dans cette autre réponse.

Soyez averti, cependant, que si vous avez des déclarations qui ne pas des chevauchements dans les deux @media règles, alors toutes ces règles s'appliquent. Ce qui se passe ici est un union des déclarations dans les deux @media règles, et pas seulement ce dernier complètement contredire l'ancien... ce qui nous amène à votre question précédente:

Comment pouvons-nous espace media queries avec précision afin d'éviter les chevauchements?

Si vous souhaitez éviter les chevauchements, il vous suffit d'écrire des requêtes de média qui sont mutuellement exclusifs.

Rappelez-vous que le min- et max- préfixes signifie "minimum", et le "maximum inclusive", ce qui signifie (min-width: 20em) et (max-width: 20em) sera à la fois correspondre à une fenêtre qui est exactement 20em de large.

Il semble que vous avez déjà un exemple, qui nous amène à votre dernière question:

J'ai vu des gens utiliser: des choses comme 799px et puis 800px, mais ce que sur un écran d'une largeur de 799.5 px? (Évidemment pas sur un affichage normal, mais une rétine une?)

Cela, je ne suis pas entièrement sûr; toutes les valeurs de pixel dans les CSS sont logiques pixels, et j'ai eu du mal à trouver un navigateur qui ferait rapport à la fraction de valeur de pixel pour une largeur de visualisation. J'ai essayé d'expérimenter avec certains des iframes, mais qui n'ont pas été en mesure de trouver quoi que ce soit.

À partir de mes expériences, il semblerait Safari sur iOS tours de toutes les fractions des valeurs de pixels de s'assurer que l'un des max-width: 799px et min-width: 800px correspondent, même si la fenêtre est vraiment 799.5 px (qui apparemment correspond à l'ancien).

---

¹ _{Bien que rien de cela n'est indiqué explicitement dans la Règles conditionnelles module ou la Cascade module (dont le dernier est actuellement prévu pour une réécriture), la cascade est implicite avoir lieu normalement, depuis la spec dit simplement à appliquer les styles et dans tous les @media règles qui correspondent le navigateur ou les médias.}

J'ai essayé comme recommandé ici:

@media screen and (max-width: calc(48em - 1px)) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

mais ce n'était pas une bonne idée car il ne fonctionne pas sur Chrome dès maintenant sur mon bureau Ubuntu ou sur mon téléphone Android. (comme expliqué ici: calc() ne fonctionne pas dans les requêtes des médias) Mais, j'ai trouvé une meilleure façon...

@media screen and (max-width: 47.9999em) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

et bam!