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](https://wiki.selfhtml.org/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!](https://wiki.selfhtml.org/wiki/Mobile_First) Lies folgende Tutorials: * [HTML/Tutorials/responsive Webdesign](https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign#Mobile_first) * [HTML/Tutorials/bestehende Webseiten responsiv umbauen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende Webseiten responsiv umbauen) * [Tipps und Tricks für media queries](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tipps_und_Tricks_f%C3%BCr_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!](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen#Vergessen_Sie_den_Begriff_Pixel.21) > > 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 -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

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](https://wiki.selfhtml.org/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!](https://wiki.selfhtml.org/wiki/Mobile_First) Lies folgende Tutorials: * [HTML/Tutorials/responsive Webdesign](https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign#Mobile_first) * [HTML/Tutorials/bestehende Webseiten responsiv umbauen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende Webseiten responsiv umbauen) * [Tipps und Tricks für media queries](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tipps_und_Tricks_f%C3%BCr_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 Turoial: [Vergessen Sie den Begriff Pixel!](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen#Vergessen_Sie_den_Begriff_Pixel.21) > > 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 -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}