Responsive Web Design guarantees that pages look gorgeous on mobile phones, tablets, and desktop displays.
1. Mobile-First Media Queries
Write baseline mobile CSS first, then expand with min-width queries for larger viewports:
⊞Code Example
/* Base Mobile Styles (Small Screens) */
.layout-grid {
display: flex;
flex-direction: column;
padding: 1rem;
}
/* Tablet (md: >= 768px) */
@media (min-width: 768px) {
.layout-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 2rem;
}
}
/* Desktop (lg: >= 1024px) */
@media (min-width: 1024px) {
.layout-grid {
grid-template-columns: repeat(4, 1fr);
}
}