Lektion 8 af 8
Responsivt design
Responsivt design får din hjemmeside til at fungere på alle skærmstørrelser. Brug media queries til at ændre styles ved bestemte bredder.
Brug relative enheder som %, em, rem og vw/vh, når det giver mening, i stedet for kun faste pixels.
CSS
/* Mobile first: default styles */
.container { padding: 24px; }
/* Tablet and up */
@media (min-width: 768px) {
.container { padding: 48px; }
}
/* Desktop */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}