Lernziel
Du lernst, warum responsive Design wichtig ist und wie Media Queries eingesetzt werden.
HTML & CSS | Intermediate
Responsive Design
Webseiten für verschiedene Bildschirmgrößen anpassen.
Media Query
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}Drag-Aufgabe
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.
Praxis
Responsive Design sorgt dafür, dass Inhalte auf Desktop, Tablet und Smartphone lesbar und nutzbar bleiben.