Css Grid Layout responsive gestalten

[Tabula_Rasa]

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?

  <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>

        .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?

 

[Tabula_Rasa]

aus:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid
Aus diesem Grund habe ich bisher einen Bogen um das Gridlayout gemacht.
Dein Layout kannst Du problemlos statt mit Grid mit Flex anlegen. Und mit einer Mediaquery die Darstellung umschalten, so dass die Elemente bei schmalem Bildschirm untereinander dargestellt werden.
Zur Einführung siehe hier:
https://www.html-seminar.de/css-flexbox.htm

Flexbox kenne ich. Ich möchte jedoch nicht, dass der Inhalt in irgendeiner Weise anders dargestellt wird. Er sollt genau so bleiben, wie ich es für ihn vorgesehen habe. Also mittels Media Queries die Schriftgröße anpassen, oder lieber etwas anderes tun?

 

[Tabula_Rasa]

Mir leuchtet auch nicht ein, warum Du dich so auf die horizontale Anordnung fest legst?

Mir gefällt es so am besten nach dem Vorbild der Seite burning series. Das gleichbleibende Design ist meines Erachtens am "schönsten". Wenn es wirklich keine Alternative gibt (z.B. wie die genannte Seite es hinbekommt), dann muss ich mir halt ein Design ausdenken, dass auf Endgeräte mit kleinerer Pixelbreite ausgerichtet ist..

 

[MrMurphy]

Hallo

Mir gefällt es so am besten nach dem Vorbild der Seite burning series.

Machst du die Seite nur für dich?

Gruss

MrMurphy

 

[Tabula_Rasa]

Momentan schon. Habe seit kurzem zu viel Zeit, die ich irgendwo hinein investieren kann. Falls ich die Seite nicht für mich machen würde, sollte ich an die Besucher denken und sie so gestalten, dass sie für den Besucher bestmöglich bedienbar ist, korrekt? Aber Bedienung und Design vertragen sich oftmals nicht, zumindest wenn ich es versuche :(

 

[Tabula_Rasa]

Ja, ich dachte, die Seite könne man schon als responsiv bezeichnen, da Vorkehrungen in Form von Code getroffen worden, dass sie auf mobilen Endgeräten genau gleich aussieht. Habe gerade die Definition von responsiv gegoogelt und möglicherweise ist die Seite doch nicht so responsiv . Auf jeden Fall bezwecke, das Design genau so zu gestalten: Auf mobilen Endgeräte die Kleinversion der Desktopversion. Hättest du da Tipps wie ich das erreichen könnte? Media Queries Schriftgröße anpassen usw.? Oder gibt es da noch etwas Anderes?

 

[Tabula_Rasa]

Ich danke dir für den Ansatz! Das probiere ich gleich morgen aus!

 

[Tabula_Rasa]

Mit transform:scale klappt es ganz gut.

Ich hätte da eine Mini-Funktion: screen.width/1200
Damit hätten wir den Wert des Scales, solange screen.width eines Gerätes < 1200px.
Wie ich das jetzt anwenden soll - keine Ahnung. Irgendjemand mit Tipps? Mit Java Script solch eine Funktion schreiben?- aber wie die Variabel im Css benutzen?