Wie gestalte ich ein responsives Design für meine Website?

Frage steht im Titel.

Welche Möglichkeiten gibt es da? Könnt ihr mir auch CSS Beispiele geben, ich mache gerade eine Website und möchte wissen ob ich das mit @media richtig mache und es noch weitere Möglichkeiten gibt, damit ich nicht alle class mehrfach eintragen muss.

Answer 1

[EinAlexander]

Wie gestalte ich ein responsives Design für meine Website?

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen

Alex

Answer 2

[Xandros0506]

Die einfachste Methode -> nutze Bootstrap. Da sind sämtliche Einstellungen bereits vorhanden. Du musst lediglich lernen, dein Design mit dem Grid-System von Bootstrap umzusetzen.
Es gibt noch diverse andere Frameworks, die ähnlich funktionieren.
Wenn du das alles selbst aufbauen willst, wirst du an Media-Query nicht vorbei kommen, um abhängig vom Display des Seitenbesuchers die Seite auf das entsprechende Format anzupassen.

Answer 3

[FaTech]

Arbeite mehr mit dynamischen Einheiten, wie % und nutze statische, wie px, nur, wenn es nicht anders geht.

Media Queries kannst du in bestimmten Fällen nutzen, aber nicht um zwischen verschiedenen Pixeln zu switchen, nur damit es auf jeden Bildschirm passt. Für sowas gibt es dynamische Größen.

Comments

[herotown34665]

Sollte ich allgemein, wie im folgenden Beispiel:

<style>
 .welcome {
  width: auto;
  height: 40%;
  }
 .welcome h2 { 
  border: 1% solid #fff;
  }
</style>

Oder sollte ich auch meistens wie bei Border auf px gehen?

[FaTech]

@herotown34665

Das kannst du tun und lassen, wie du willst. Border ist aber so ein Ding, was ruhig auch Pixel sein darf