media-queries

[Auge]

Hallo

Hallo Lydia,

Dann bestünde das Problem ja nur bei exakt 30em.

Und das ist genau eins zu viel. Damit hast Du nicht 3, sondern 4 Fälle, für die Du entwickeln und testen musst.

Das verstehe ich nun gar nicht mehr.

Mit und ohne

@media screen (max-width: 30em){}

gilt die schmale Definition solange width < 30em.

Richtig. Da die Regeln aber auch ohne die Definition @media screen (max-width: 30em) gilt, kannst und solltest du sie auch weglassen.

Ab 30em gilt ohne mein Vorschlag die schmale Definition (da keine Einschränkung) und es gilt die Definition für 30em.

Korrekt.

Ich muss also testen <30em, >=30em

Nein, musst du nicht. Sieh die Mediaqueries als Schalter für Ergänzungen zu den bereits vorhandenen Regeln, nicht als Schalter für (grundsätzliche) Ersetzungen.

Was will man den typischerweise für unterschiedlich große Viewports unterscheiden? Schriftart und -farbe sind es normalerweise nicht. Meist auch nicht Hintergrundfarben für bestimmte Bereiche (Seitenkopf, Navigation, Merksätze in Dokus, etc.). Normalerweise™️ verändert man Schriftgrößen, die Anordnung von Bereichen und Abstände.

Da man, um bei der obigen Auflistung zu bleiben, die Schriftarten und Farben bereits für schmale Viewports sowie Abstände festgelegt hat, und (die typischerweise) serielle Anordnung von Bereichen untereinander der Normalfall ist, für den man oft nicht einmal irgendwas festlegen muss, benutzt man die einen, allgemeingültigen Regeln einfach weiter und überschreibt und ergänzt für andere Anzeigegrößen und -medien nur jene Regeln, die gesondert behandelt gehören.

html {
  /* diese Regeln gelten immer */
  font-family: sans-serif;
  color: #013;
  font-size: 1em;
  font-size: 1rem;
}

body > * {
  /* die Regel für margin ist
   * nur für schmale Viewports gedacht
   */
  margin: 0.75em 0;
  padding: 0;
}

@media screen and (min-width: 32em) {
  body > * {
    /* der margin nach oben und unten wird
     * nun für breitere Viewports erhöht
     */
    margin: 1em 0;
  }
}

Das ist jetzt ein willkürliches Beispiel mit willkürlich notierten Regeln. Wie du siehst, überschreibe ich nur eine Regel, die bei breiteren Viewports (am 32em) einen größeren margin für direkte Kinder von body. In der Praxis wird man mehr und anderes überschreiben und ergänzen, aber als Beispiel für das Prinzip sollte es langen.

Tschö, Auge