Aus dem Kurs: Grundlagen der Webprogrammierung: Meine erste Website

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Media Queries verstehen

Media Queries verstehen

Aus dem Kurs: Grundlagen der Webprogrammierung: Meine erste Website

Gratismonat starten Für Ihr Team erwerben

Media Queries verstehen

“

Beim responsiven Webdesign führt man über CSS Anpassungen durch, sodass eine Website bei verschiedenen Viewportgrößen funktioniert. Wie geht das aber konkret? Hierzu ein kleines Beispiel: Ich habe hier ein div-Element, da sind zwei article-Elemente drin. Und per CSS habe ich die Schriftart geändert, das ist nicht so wichtig. Und ich habe hier für dieses div-Element für den Container angegeben: "display: flex" und "gap: 1rem". Dadurch werden die Elemente nebeneinander dargestellt. Und ich habe definiert, dass die article-Elemente, das sind diese hier, 50 % breit sein sollen. So sieht das dann im Browser aus. Und wenn ich den Viewport vergrößere und verkleinere, dann merke ich, es ist schon gar nicht so schlecht, weil es sich automatisch anpasst, weil eben die article-Elemente in Prozent eine Breite erhalten haben, wenn es ganz klein ist, gibt es ein Problem, und dadurch sind die relativ flexibel. Schauen wir uns an, was passiert, wenn wir ein Bild einfügen. Den Code für das Bild habe…

Inhalt