Responsive Design

Webseiten für verschiedene Bildschirmgrößen anpassen.

Lernziel

Du lernst, warum responsive Design wichtig ist und wie Media Queries eingesetzt werden.

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

Setze die Schluesselteile einer einfachen Media Query an die passende Stelle. Das hilft beim Verstehen der typischen Responsive-Syntax.

Bausteine

Baustein ziehen oder anklicken, dann in eine Luecke setzen.

Responsive Design sorgt dafür, dass Inhalte auf Desktop, Tablet und Smartphone lesbar und nutzbar bleiben.

Weiter →