Frage von XCreepX, 35

Wie kann sich ein Text der höhe eines Browser-Fensters anpassen (Responsive Webdesign)?

Hallo, ich möchte bei meiner Website einen text im

bereich haben, der sich der höhe des Browserfensters anpasst. In etwa wie hier:

https://pixons.com/

dort meine ich den Text: We build digital products & services. Er passt sich beim verstellen der höhe automatisch dem Fenster an. Wie kann ich dies schaffen?

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von PeterKremsner, 23

Du kannst dazu die Viewportunits von CSS verwenden und nach dem aussehen der Seite wurde es vermutlich so gemacht.

https://css-tricks.com/viewport-sized-typography/

Allerdings gibt es im Zusammenhang mit den Viewportunits immer noch Bugs und Probleme in einigen Browsern und die Abwärtskompatibiltät ist nicht gerade hoch, weswegen ich derzeit noch von den Viewportunits abraten würde, wenn es sich um eine öffentliche Seite, mit großer Reichweite, handeln soll.

Eine alternative wäre es die Textgröße mit media Querys im css zu verändern oder das ganze mit Javascript realisieren. Die Lösung mit js ist leider nicht sehr effektiv funktioniert aber einigermaßen, solange der Browser es erlaubt die Fenstergröße mit js auszulesen.

Kommentar von XCreepX ,

Gute Idee, so habe ich es mit dem Banner im Hintergrund auch gemacht. Danke :)

Antwort
von medmonk, 15
  1. Mit Media Queries arbeiten
  2. Schriftgröße in EM/REM festlegen
  3. Devices gruppieren (Media Queries) und einzeln anpassen
  4. Website nach dem Mobile-first Konzept umsetzen
  5. Darstellung auf unterschiedlichen Geräten testen

Ich habe mehrere Geräten zum Testen. Getestet wird also mit diversen Smartphones und Tablets die alle unterschiedliche Auflösungen haben. Auch am PC/Mac Schrittweise eine Website/App Mobile-first entwickle. Dank Preprocessor alles auch recht flott realisiert ist. 

LG medmonk  

Keine passende Antwort gefunden?

Fragen Sie die Community