CSS Responsive Design
Mobile-First Responsive Design
Fluid layouts that work on all screen sizes.
Responsive Breakpoints
@media (max-width: 480px) { /* mobile */
.container { padding: 20px; }
}
@media (min-width: 768px) { /* tablet */
.grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) { /* desktop */
.container { max-width: 1200px; margin: 0 auto; }
}Modern Techniques
- container queries (@container)
- clamp() for fluid typography
- aspect-ratio property
- logical properties (margin-block)