Navigationsleiste an Bildschirmgröße anpassen
Hallo,
Ich bin absoluter Anfänger mit HTML, CSS und JS. Ich möchte gerade eine Web App erstellen und wollte dafür unten eine Navigationsleiste einfügen. Das hat soweit auch alles geklappt. Allerdings kann ich einfach nicht herausfinden wie sich die Navigationsleiste an die Bildschirmgröße anpasst. In allen erklär videos und Artikeln wird immer margin-right: Xpx angegeben. Damit ist es ja aber nicht flexibel anpassbar. Was jemand wie ich das hinbekomme, dass es sich anpasst?
1 Antwort
Margin bestimmt nur den Abstand, den das Element zu anderen Elementen besitzt.
Ohne den Code zu kennen, kann man nur sehr allgemein antworten.
Anpassen kann man Elemente über verschiedene Methoden.
Die einfachste ist mit Prozentualen Werten zu arbeiten, die zB festlegen, dass die Leiste selbst immer 100% der Breite nutzt, während die Menüpunkte (zB 5 an der Zahl) mit 20% der Breite dargestellt würden.
Da dies bei unterschiedlichen Formaten unvorteilhaft werden kann, bietet es sich an, mittels Media-Queries eigene Regeln aufzustellen, die zB ausgehend von einer device-width festlegen, wann eine Regel in Kraft treten soll und so eine genauere Steuerung darüber erlaubt, wie sich Elemente auf unterschiedlich großen Displays, Vertikal oder Waagrecht orientierend verhalten sollen.
Beliebt sind auch Alternativen zu %, wie vh und vh für Höhe und Breite im Viewport, dem tatsächlich sichtbaren Bereich, während Schriften mit em und rem die allgemeine Skalierbarkeit der Benutzereinstellungen berücksichtigen können.
In der Praxis lassen sich solche Geschichten am Leichtesten umsetzen, wenn man mit einem Grid-Modell wie Flexbox arbeitet. Dadurch lässt sich das Verhalten skalierbarer Container wesentlich einfacher steuern und an die gestellten Bedürfnisse anpassen.
https://www.w3schools.com/cssref/css_units.php
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
vielen dank. Das hat mir sehr geholfen, ich werde es gleich ausprobieren