[gelöst] Fluid Typography <---> responsive Menu
Eingetragen von tetri999 (153)am 28.03.2019 - 14:59 Uhr in
Hallo,
ich habe - wie hier beschrieben - die Fluid Typography-Technik eingesetzt,
d.h. die in CSS für verschiedene Elemente festgelegten Schriftgrößen werden innerhalb bestimmter Grenzen kontinuierlich mit der viewport-Größe skaliert.
Das funktioniert soweit wunderbar.
Das Problem:
das responsive Menu (left-off-canvas) berücksichtigt diese Skalierung nicht - also das Hamburger-Menu bei Mobil-Geräten,
d.h. wenn das Menü mehrere Ebenen mit verschieden vielen Unterelementen hat, paßt es sich nicht mehr genau an die durch die Skalierung veränderte Gesamthöhe an (bleibt zu hoch - trotz height:auto).
Hat jemand eine Idee, wie man das korigieren kann?
mfG, Michael
- Anmelden oder Registrieren um Kommentare zu schreiben
Ich würde statt px mit vh bzw
am 28.03.2019 - 17:06 Uhr
Ich würde statt px mit vh bzw vw arbeiten und sehen, was passiert.
Siehe: https://www.drweb.de/neue-css-einheiten-fuer-responsive-designs-47490/
Perfekt!
am 28.03.2019 - 18:15 Uhr
ich habe die Starteinstellungen so geändert:
$min_width: 320px;$max_width: 1200px;
$min_font: 0.75rem; /* STATT 12px; */
$max_font: 1rem; /* STATT 16px; */
html {
@include fluid-type($min_width, $max_width, $min_font, $max_font); /* https://css-tricks.com/snippets/css/fluid-typography */
}
Vielen Dank für den Hinweis,
Michael