Mobile-First Design

Mobile-first design is a strategy in which the layout, content and styles are designed for the smallest screens first, then progressively enhanced for tablets and desktops. In CSS, base rules target phones and min-width media queries add complexity as space grows.

Why it matters

Small screens force priorities: what content and actions matter most. Starting there avoids cramming a desktop layout into a phone. It also tends to ship less CSS and fewer heavy assets to constrained devices, because the default styles are simple and larger-screen rules are opt-in. Search engines primarily crawl and index the mobile version of pages, which makes mobile quality especially significant.

Example

/* base: phone */
.nav { display: flex; flex-direction: column; }

/* tablet and up */
@media (min-width: 768px) {
  .nav { flex-direction: row; gap: 1.5rem; }
}

The desktop-first alternative would write the row layout first and undo it with max-width queries, usually requiring more overrides.

Common mistakes

• Treating it as only a CSS technique and not rethinking content and navigation.
• Hiding content on mobile with display: none while still downloading it.
• Tiny tap targets; aim for roughly 44 pixels.
• Testing only in browser resizing instead of on real devices.

Related

• Responsive design
• Breakpoint
• Media query
• Progressive enhancement

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.