@Marc

[Rolf B]

Hallo liebewinter,

benutze für Tablets und Smartphone

Ok. Es wird benutzt, um für unterschiedliche Geräte unterschiedliche Einstellungen zu machen. Du schreibst

@media BEDINGUNG {
   CSS REGELN
}

Der Browser überprüft die Bedingung, und wenn sie wahr ist, dann gelten die CSS Regeln, die im @media Block stehen, ZUSÄTZLICH.

Eine Bedingung kann prüfen, welcher Geräte-Typ es ist. Es gibt screen, print, speech und all. Speech ist für Sprachausgabe am Computer.

Eine Bedingung kann auch prüfen, ob das Gerät eine bestimmte Eigenschaft hat. min-width: 40em bedeutet: Ist das Gerät mindestens 40em breit? Oder ob das Smartphone aufrecht (portrait) oder quer (landscape) gehalten wird. In unserem Wiki und bei Mozilla steht mehr dazu.

Und man kann Bedingungen kombinieren. screen and (min-width:40em) ist wahr, wenn die Ausgabe auf den Bildschirm geht und das Anzeigefenster 40em breit ist.

Wichtig ist, dass Du nicht Pixel prüfst (min-width:600px), das gibt Probleme. Die Erklärung ist mir jetzt zu viel Arbeit 😉.

Deswegen steht im @media Block etwas anderes als vor dem Block. Man möchte ja, dass sich etwas ändert, wenn die @media Bedingung wahr ist. Man soll dabei der Idee "mobil zuerst" folgen, das heißt: man baut die Seite so, dass sie auf mobilen Geräten gut aussieht und ändert dann mit @media Abfragen das CSS so ab, dass sie auch auf großen Bildschirmen gut aussieht.

Du brauchst kein Smartphone um eine min-width Abfrage zu testen. Mache einfach das Fenster vom Browser schmaler. Irgendwann schaltet er um.

Rolf