Mobile-First Breakpoint at 768px

Mobile-First Design with min-width: 768px

Mobile-first design starts with the smallest screen as the default and adds styles for larger screens using min-width media queries. The 768px breakpoint is the most common tablet threshold.

The Query

@media screen and (min-width: 768px) {
  /* Tablet and desktop styles */
}

Why 768px?

The value 768px corresponds to the width of an iPad in portrait mode and is widely adopted as the dividing line between "phone" and "tablet" layouts. Tailwind CSS uses md: 768px as one of its default breakpoints for the same reason.

How Mobile-First Works

Without any media query, your CSS targets all devices. As the viewport widens past 768px, the min-width query activates and applies additional or overriding styles:

/* Base: single column */
.grid { display: block; }

@media screen and (min-width: 768px) {
  /* Tablet+: two columns */
  .grid { display: grid; grid-template-columns: 1fr 1fr; }
}

Benefits of Mobile-First

1. Performance -- Phones receive only the essential CSS; extra rules load only on capable devices.
2. Simplicity -- You write the simplest layout first, then progressively enhance.
3. SEO -- Google indexes mobile pages first, so a clean mobile base is critical.