Der Titel dieses Artikels ist für die entstandene Lösung sicher überzogen – trotzdem hatte ich mal wieder Spaß an einer kleinen statischen Spielerei, die im Grunde nur entstanden ist, da ich für ein Projekt den Viewport haben wollte um besser für entsprechende Media Queries zu stylen. Die eigentliche Lösung wurde dann etwas erweitert und durch die Hilfe der Community, insbesondere Frederic und Jens, wurde der Iststand erreicht und kann in jeder Form genutzt werden.
Zum Testen von Media Queries nutze ich meine kleine iFrame-Anpassung, die mittels DOM Storage-API verschiedene Werte zulässt; mehr dazu im zugehörigen Artikel. Trotzdem wollte ich immer den aktuellen Stand haben und hatte mir daher mittels CSS an den body gehangen. Dies kann man einfach tun und ist für verschieden, die üblichen Verdächtigen, nun im Projekt integriert. Diese Aufgabe wird von einer einzelnen CSS-Datei übernommen – debug.css; so dass sie einfach inkludiert werden kann. Alternativ könnt ihr damit alles mögliche anfangen – forken und somit die Idee verbessern und mehr daraus machen.
Innerhalb der kleinen Spielerei sind diverse Anpassungen für Media Queries drin, so dass die Seite auch einen Effekt hat, wenn man die Größe des Browsers ändert bzw. mit verschiedenen Geräten auf die Seite gelangt. Dabei habe ich keinen Wert auf Schönheit gelegt, sondern eher Pragmatismus und Effekthascherei genutzt. So nutze ich Transition via CSS3 um das Verändern etwas animiert zu gestalten und so die Darstellung zu hübschen.
Schaut euch den Code einfach an, entweder direkt auf der Seite oder im Projekt auf github, wo ich alles abgelegt habe.
Für alle, denen noch der Zusammenhang fehlt; bitte einfach die Seite besuchen und den Browser in der Größe ändern; dabei die Ausgabe am oberen Rand beachten. Alternativ dieses kleine Video.
Mir ist klar, dass dies nicht die beste Lösung ist, da Media Queries in jeder erdenklichen Form auftauchen können und die Ausgabe den größten Nutzwert hat, wenn man die Ausgabe der optimierten Größe anpasst. Aber es stellt eine einfache und schnell Lösung dar. Alternativen sind vermutlich via JavaScript denkbar, die das Stylesheet parsen und anhand der gefunden Anweisungen zu Media Queries den Viewport auswerfen – aber diese Form erfordert etwas mehr zeit und Kraft; also schnell überzogen und in meinem Fall ist die vorgestellte Lösung vollkommen ausreichend; durch die Erweiterungen von Frederic sind auch noch andere Viewports eingeflossen und in diesem Zusammenhang habe ich mir bekannte typische Größen und Ausrichtungen integriert – Portrait und Landscape. Alles weitere seht ihr in der angesprochenen debug.css und direkt auf der Seite, die den Source des Stylesheets ausgibt.
© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren