Media Queries
bearbeitet von Matthias ApselServus!
> 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](http://wiki.selfhtml.org/wiki/Media_queries), und zwar wie @@MrMurphy1 sagte, nur 2 oder 3 [Medienmerkmale](http://wiki.selfhtml.org/wiki/Media_queries#.C3.9Cbersicht_der_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](http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout)
* [responsive Bilder](http://wiki.selfhtml.org/wiki/HTML/Tutorials/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?
* [http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Men%C3%BCs#Navigation_ausblenden_und_mit_Navicon_aufrufen](Navigation ausblenden)
Es steht (fast) alles im Wiki. Stöber mal durch!
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel [zu tun](http://wiki.selfhtml.org/wiki/Kategorie:ToDo) - packen wir's an.
Media Queries
bearbeitet von Matthias ApselServus!
> 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](http://wiki.selfhtml.org/wiki/Media_queries), und zwar wie @@MrMurphy1 sagte, nur 2 oder 3 [Medienmerkmale](http://wiki.selfhtml.org/wiki/Media_queries#.C3.9Cbersicht_der_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](http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout)
* [responsive Bilder](http://wiki.selfhtml.org/wiki/HTML/Tutorials/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?
* http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Men%C3%BCs#Navigation_ausblenden_und_mit_Navicon_aufrufen
Es steht (fast) alles im Wiki. Stöber mal durch!
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel [zu tun](http://wiki.selfhtml.org/wiki/Kategorie:ToDo) - packen wir's an.