Tabula_Rasa
Mitglied
Hallo,
ich versuche gerade die Navigation responsiv zu gestalten. Auf mein Handy ist immer nur ein Teil zu sehen, was bei der bleibenden Pixelanzahl normal ist. Erst beim Doppelklick wird die Seite so angezeigt, wie auf dem Pc, nur halt in klein. Wie kann ich das die Navigationsleiste möglichst responsiv gestalten? Indem ich von Pixel auf % umsteige? Oder gibt es da eine bessere Methode, die Seite auf dem Handy als kleine Version der Desktop-Seite anzeigen zu lassen?
EDIT: Ich weiß, dass es media queries gibt: Sollte ich einfach die Schriftgröße je nach Pixelbreite eines Gerätes anpassen?
ich versuche gerade die Navigation responsiv zu gestalten. Auf mein Handy ist immer nur ein Teil zu sehen, was bei der bleibenden Pixelanzahl normal ist. Erst beim Doppelklick wird die Seite so angezeigt, wie auf dem Pc, nur halt in klein. Wie kann ich das die Navigationsleiste möglichst responsiv gestalten? Indem ich von Pixel auf % umsteige? Oder gibt es da eine bessere Methode, die Seite auf dem Handy als kleine Version der Desktop-Seite anzeigen zu lassen?
HTML:
<div class="outercontainer">
<div class="grid-container">
<div class="grid-item1"> <strong style="font-size: 25px;">Deutschland</strong></div>
<div class="grid-item2">
Kategorie:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="grid-item3"> <input type="text" placeholder="Suche deine Events..." style="width: 100%;font-size:17px;"></div>
<div class="grid-item4"> <a href="#">Anmelden </a></div>
<div class="grid-item5"> <a href="#"> Registrieren</a></div>
</div>
Code:
.outercontainer {
width: 1200px;
height: auto;
margin: 0 auto;
border-width: 1px;
border-style: solid;
}
/*Navigation-Struktur*/
.grid-container {
display: grid;
grid-template-rows: 45px;
grid-template-columns: auto auto auto auto auto auto;
background-color: black;
}
.grid-container a {
text-decoration: none;
color: white;
}
.grid-container>div {
text-align: center;
color: whitesmoke;
font-size: 18px;
align-self: center;
}
/*Searchbar*/
.grid-item3 {
grid-column-start: 3;
grid-column-end: 5;
}
EDIT: Ich weiß, dass es media queries gibt: Sollte ich einfach die Schriftgröße je nach Pixelbreite eines Gerätes anpassen?
Zuletzt bearbeitet: