MrMurphy1: Media Queries

Beitrag lesen

Hallo

Ich dachte das wäre selbstredend? Natürlich muß ich das am neuen Viewport testen und dem Inhalt ein entsprechendes Aussehen geben. Die Breite ist meiner Meinung nach insofern wichtig weil ich wissen muß ab welcher Viewportgröße die Media Queries wirken sollen. Die Webseite hat eine Größe von 70 % des Bildschirmes (27") weil sonst alles unförmig erscheinen würde. Man findet diese Einschränkung bei vielen Webseiten. Mein Sohn hat ein Mac Book Pro 13" und hier ist alles noch (soweit) in Ordnung. Problematisch wird es bei einem Pad weil durch die fehlenden 30% alles gedrückt erscheint also habe ich mittels Media Queries ab einer gewissen Größe diese 30% hinzugefügt.

Das ist wie schon geschrieben ein Problem. Du willst zwanghaft die Geräte / Viewportgröße in die Media Queries hineinzwängen. Das ist falsch.

Aktuell ist die sinnvollste Vorgehensweise die Media Queries nicht an die Endgeräte / Bildschirmgrößen anzupassen, sondern an den Inhalt der Webseite.

Das ist alles. Punkt. Fertig. Aus. Nix Gerät, nix Viewportgröße.

Du brauchst nur die Seite erstellen, schiebst dein Browserfenster zusammen und fügst dort Media Queries ein wo dir das Layout um die Ohren fliegt. Das nennt sich Desktop-First.

Oder du ziehst das Browserfenster eng zusammen, erstellst die Seite, ziehst das Fenster auseinander und fügst die Media Queries dort ein, wo die zusätzliche Breite sie sinnvoll machen. Das nennt sich dann Mobile-First.

Ob du bei den Media Queries als Einheit px oder em verwendest spielt technisch keine Rolle. em ist komplizierter, weil du die px vollkommen unnötig in em umrechnen musst.

Gruss

MrMurphy