Diskrepanz Beispiel und Erläuterung

[Auge]

Hallo

Was an diesem Beispiel jetzt noch zu überdenken wäre, ist das Überlappen der @media-bereiche. Wenn ich eine Media-Query für min-width:30em und eine weitere für min-width:60em setze, treffen ab 60em zwei Medienbereiche gleichzeitig zu, was ggf. zu Kollisionen zwischen den Regeln führt.

Ja und? Entweder die früher definierten Regeln treffen weiterhin zu oder du überschreibst sie.

html {
  color: #000;
  background: #fff;
  padding: 0.25em;
  margin: 0;
}

@media (min-width: 30em)  {
  html {
    background: #fff;
    padding: 1em;
  }
}

@media (min-width: 60em) {
  html {
    background: #dde;
    padding: 1.5em;
  }
}

Das mag ein blödes Beispiel sein, aber zur Erklärung des Prinzips sollte es reichen. Die Eigenschaften color und margin verändern sich nicht, nur padding und background werden geändert. Warum sollte das zu Kollisionen führen?

Besser wäre

… Aber, wenn der Teufel mal wieder einen guten Tag hat, bekommst Du einen Screen mit exakt 30em (480 Pixel bei 1em = 16px) und beide Media Queries greifen.

Ist dein Vorschlag im Lichte dessen wirklich besser?

Tschö, Auge