Media Queries & Mobile-First Breakpoints

Mobile-First CSS Architecture

In Mobile-First CSS, base styles target mobile viewports first. Media queries with min-width progressively enhance the layout as screen real estate increases:

/* Base styles (Mobile: 0px - 639px) */
.main-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Tablet Viewport (640px and up) */
@media (min-width: 640px) {
    .main-layout {
        gap: 2rem;
    }
}

/* Desktop Viewport (1024px and up) */
@media (min-width: 1024px) {
    .main-layout {
        flex-direction: row;
    }
}