Media Queries

[Matthias Scharwies]

Servus!

Und hier setzt meine Frage an.

Wie steuere ich nun die Anzeige nach der Bildschirmbreite und nicht nach Pixeln?

Auch wenn es erst einmal nicht nach einer direkten Antwort klingt:

• Verwende semantisches Markup für deine Inhalte.

• Überlege Dir, ab wann diese bei einer bestimmten Viewportbreite nicht mehr gut aussehen.

  • Bei Text ist es eigentlich egal, höchstens ein max-width: 60em;, damit die Zeilen nicht zu lang werden.

  • Bei Grafiken und bestimmten Seitenelementen solltest du flexible, prozentuale Breiten verwenden, damit auf breiten Bildschirmen drei oder vier, auf Tablets in landscape-Modus 2 Bilder nebeneinander und auf schmalen Bildschirmen das Bild 100% breit wird.

• Jetzt erst brauchst du media queries, und zwar wie @@MrMurphy1 sagte, nur 2 oder 3 Medienmerkmale und wie @@JürgenB gesagt hat, mit em als Basis, sodass das Design bei einer größeren Schrift (Strg+ oder ein Fingerauseinanderziehen) angepasst wird.

Beispiele:

• flexibles Layout

• responsive Bilder

Muß man für jede Bildschirmbreite separat "@media screen ..." anführen?

Die Frage ist oben beantwortet.

Genügt die Angabe einer Breite da man ja Pads bzw. Smartphones senkrecht halten kann oder muß man sowohl die Höhe und Breite eines Pads/Smartphones berücksichtigen?

Horizontale Scrollbalken solltest Du vermeiden wie der Teufel das Weihwasser, aber vertikal nach unten scrollen macht doch jeder, also nur die Breite!

Wo gibt es ein Beispiel, daß bei einem Smartphone der Navigator ausgeblendet wird damit das Hauptfenster lesbar bleibt?

• Navigation ausblenden

Es steht (fast) alles im Wiki. Stöber mal durch!

Herzliche Grüße

Matthias Scharwies