Responsive Design - Größenangaben

[Matthias Scharwies]

Servus!

Hi, wenn ich also zwei Angaben mache der Art:

@media only screen and (min-width: 60em)

und

@media only screen and (min-width: 40em)

ist dann die Reihenfolge der @media-Angabe entscheidend?

Ja, du überschreibst die ja wieder.

Bei einer Viewportgröße von 70em würden aber immer beide @media-Bedingungen zutreffen.

Genau

Oder müsste die kleinere der Angaben so lauten:

@media only screen and (min-width: 40em) and (max-width: 59em)

Was aber dann bei einer Viewportgröße von 59.1em?

Dann würde diese media queries nicht zutreffen.

Fang am besten ohne media queries an und leg Farben, Text und andere Stilvorgaben fest. Verzichte dabei auf alle Breiten und Höhen! Block-Elemente und Text sind automatisch (z.b. bei h1, p, ul ...) 100% breit.

Wenn du jetzt den Bildschirm auseinanderziehst und merkst, dass bei ca 30em 2 Blockelemente nebeneinanderpassen, setzt du dort eine media queries:

@media only screen and (min-width: 30em) {
  Festlegung für 2-Spaltenlayout

body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

element {
  width: 15em;
}

Wenn du die Seite weiter auseinanderziehst und Platz für mehr hast, kannst du eine weitere media queries machen, die die erste überschreibt:

@media only screen and (min-width: 50em) {
  Festlegung für 3-Spaltenlayout
body {
  grid-template-columns: repeat(3, 1fr);
}

element {
  width: 20em; /* neue Breite */
}

container:

So etwas ist dann übersichtlicher als Breiten- und Höhenangaben quer durchs Stylesheet.

Herzliche Grüße

Matthias Scharwies