Kurzregel
| Ansatz | Keyword | Richtung |
|---|---|---|
| Desktop First | max-width |
groß → klein |
| Mobile First | min-width |
klein → groß (besser) |
max-width)max-width wird das Layout für kleinere Screens überschrieben/* Basis: Desktop */
.grid-container {
grid-template-columns: 1fr 1fr 1fr;
}
/* Überschreibung für Tablet */
@media (max-width: 1023px) {
.grid-container {
grid-template-columns: 1fr 1fr;
}
}
/* Überschreibung für Mobile */
@media (max-width: 599px) {
.grid-container {
grid-template-columns: 1fr;
}
}
Nachteil von Desktop First:
min-width) – empfohlenmin-width erweitert das Layout für größere Screens/* Basis: Mobile – eine Spalte, alles gestapelt */
.grid-container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"hero"
"card-1"
"card-2"
"sidebar"
"footer";
}
/* Breakpoint 1: Tablet ab 600 px – zwei Spalten */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"header header"
"hero hero"
"card-1 card-2"
"sidebar sidebar"
"footer footer";
}
}
/* Breakpoint 2: Desktop ab 1024 px – drei Spalten */
@media (min-width: 1024px) {
.grid-container {
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"header header header"
"hero hero sidebar"
"card-1 card-2 sidebar"
"footer footer footer";
}
}
Vorteil:
| Name | Breakpoint | Typische Geräte |
|---|---|---|
| Mobile | Basis (kein Query) | Smartphones (< 600 px) |
| Small | 600px |
Tablets im Hochformat |
| Medium | 768px |
Tablets im Querformat |
| Large | 1024px |
Laptops, kleine Desktops |
| X-Large | 1280px |
Große Desktop-Monitore |
Die genauen Werte sind nicht festgelegt – sie sollten sich am eigenen Inhalt und Design orientieren, nicht an bestimmten Geräten.