📱 1. Das Mobile-First Prinzip
Anstatt ein Desktop-Layout mühsam für kleine Screens einzudampfen, beginnen wir mit der einfachsten, vertikalen Smartphone-Darstellung. Über @media (min-width: ...) fügen wir progressiv mehr Spalten und Platz hinzu:
/* 📱 1. BASIS: Mobile First (1 Spalte, kompakte Paddings) */
.layout-container {
display: flex;
flex-direction: column;
gap: 16px;
}
/* 📟 2. TABLET: Ab 768px Breite nebeneinander */
@media (min-width: 768px) {
.layout-container {
flex-direction: row;
}
}
/* 💻 3. DESKTOP: Ab 1024px Mehrspalten-Grid */
@media (min-width: 1024px) {
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
}📐 2. Flüssige Typografie mit clamp()
Mit clamp(min, val, max) skaliert Text stufenlos mit der Viewport-Breite (vw), ohne jemals unlesbar klein oder überdimensional groß zu werden:
/* clamp(Untergrenze, Dynamischer Wert, Obergrenze) */
h1.hero-title {
font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}🎈 Didaktische Analogie: Das elastische Gummiband
Ein fixer Pixelwert ist wie ein starres Holzlineal. clamp() ist ein elastisches Band mit zwei Anschlägen: Es dehnt sich geschmeidig mit dem Fenster, stoppt aber präzise am Minimal- und Maximalanschlag.