Diskrepanz Beispiel und Erläuterung

[Rolf B]

Hallo awehring,

keine Ahnung, was Du meinst 😉 (flöt)

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. Besser wäre

@media (min-width: 30em)  {
   /* Regeln, die tatsächlich für kompakte und breite Ansicht gelten sollen */
}
@media (min-width: 30em) and (max-width: 60em) {
   /* Regeln für kompakte Ansicht 30em-60em */
}
@media (min-width: 60em) {
   /* Regeln für breite Ansicht 60em und mehr */
}

Der Browser tut sich dann leichter. Je weniger Regeln gleichzeitig gelten, desto später kommt man in Bereiche, wo der Browser überlastet ist. 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. Deshalb sollten deine Regeln so gestaltet sein, dass in diesem Überlappungfall kein Durcheinander entsteht. „Tricks“ wie max-width:59.999em und min-width:60em solltest Du aber unterlassen. Der Teufel hat auch eine Breite von 59.9992em im Angebot.

Rolf