Größe des sichtbaren Bildschirmbereichs ermitteln

[Matthias Scharwies]

Servus!

wie nennt man eigentlich den sichtbaren Bereich auf PC, Tablet, Smartphone? Ist das auf neudeutsch der Screen?

Für den Bereich, den man in der Grösse verändern kann gebraucht man den Begriff des viewports (oder zu deutsch ca: Sichtfeld)

Wiki: Viewport

Wenn ich, um responsive Anwendungen zu schreiben, diese Bereich nach und nach verkleinere, komme ich zu einer Stelle, wo ich das Layout verändern möchte. In Beispielen habe ich Angaben gelesen wie "@media only screen and (max-width: 500px)". Wie kommt man zu diesen Werten?

Achtung, dies wird in vielen Tutorials falsch gelehrt! Dreh die Vorgehensweise um.

Mobile first!

Lies folgende Tutorials:

• HTML/Tutorials/responsive Webdesign
• [HTML/Tutorials/bestehende Webseiten responsiv umbauen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende Webseiten responsiv umbauen)
• Tipps und Tricks für media queries

Ich bin nicht mal sicher, ob das eine zuverlässige Angabe ist. Ich würde das bevorzugen: @media only screen and (max-width: 40em){}

em bezieht sich dabei auf die im Browser eingestellte default Schriftgrösse.

Ja, hier noch einmal mehr über em im oben verlinkten Tutorial: Vergessen Sie den Begriff Pixel!

Du kannst alle erlaubten Einheiten verwenden, also auch mm oder cm.

Ja, aber das wäre im Webdesign absolut sinnlos und verwirrt hier doch nur!

Herzliche Grüße

Matthias Scharwies