Quelles sont les règles pour le chevauchement des requêtes médias CSS?

quelles sont les règles pour le chevauchement des requêtes médias CSS?

"1519200920 de la Cascade.

@media règles sont transparentes à la cascade, donc lorsque deux ou plusieurs @media règles correspondent en même temps, le navigateur doit appliquer les styles dans toutes les règles qui correspondent, et résoudre la cascade en conséquence. ¹

ce qui va se passer, dans tous les navigateurs, à exactement 20em, et 45em?

à exactement 20em de large, votre première et deuxième requête multimédia correspondront toutes les deux. Les navigateurs appliqueront les styles dans les deux règles @media et cascade en conséquence, donc s'il y a des règles contradictoires qui doivent être dépassées, le dernier-déclaré gagne (en tenant compte des sélecteurs spécifiques, !important , etc). De même pour la deuxième et troisième requête de médias quand le viewport est exactement 45em de large.

En considérant votre exemple de code, avec quelques règles de style réel ajouté:

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

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

lorsque le viewport du navigateur a exactement 20em de large, les deux requêtes médias retourneront true. Par la cascade, display: block l'emporte display: none et float: left s'appliquent à tout élément de la classe .sidebar .

vous pouvez penser qu'il s'agit d'appliquer des règles comme si les requêtes des médias 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 quand un navigateur correspond à deux ou plusieurs requêtes médias peut être trouvé dans cette autre réponse .

soyez averti, cependant, que si vous avez des déclarations que ne se chevauchent dans les deux règles @media , alors toutes ces règles s'appliqueront. Ce qui se passe ici est une union des déclarations dans les deux @media règles, pas seulement la dernière complètement overruling l'ancien... ce qui nous amène à votre question précédente:

comment espacer avec précision les requêtes des Médias pour éviter les chevauchements?

si vous souhaitez éviter le chevauchement, vous avez simplement besoin d'écrire des requêtes médias qui sont mutuellement exclusives.

N'oubliez pas que les préfixes min- et max- signifient "minimum inclusive" et "maximum inclusive"; cela signifie (min-width: 20em) et (max-width: 20em) les deux correspondent à un viewport qui fait exactement 20em de large.

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

j'ai vu des gens utiliser: des choses comme 799px et puis 800px, mais qu'en est-il d'une largeur d'écran de 799.5 px? (Évidemment pas sur une exposition régulière,mais une rétine?)

ceci Je ne suis pas tout à fait sûr; toutes les valeurs de pixel dans CSS sont des pixels logiques, et j'ai été dur pressée pour trouver un navigateur qui rapporterait une valeur de pixel fractionnaire pour une largeur de viewport. J'ai essayé d'expérimenter avec certaines iframes mais je n'ai rien trouvé.

D'après mes expériences, il semblerait que Safari sur iOS fait le tour de toutes les valeurs de pixels fractionnaires pour s'assurer que l'une ou l'autre de max-width: 799px et min-width: 800px correspond, même si le viewport est vraiment 799.5 px (ce qui correspond apparemment au premier).

---

¹ _{bien que rien de tout cela ne soit explicitement indiqué dans le Conditional Rules module ou le Cascade module (ce dernier étant actuellement prévu pour une réécriture), la cascade est implicite pour avoir lieu normalement, puisque la spécification dit simplement d'appliquer des styles dans n'importe quelle et toutes les règles @media qui correspondent au navigateur ou au média.}