0
0
CSSmarkup~5 mins

Mobile-first approach in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The mobile-first approach means designing websites starting with small screens first. This helps make sure the site works well on phones before adding styles for bigger screens.

When building a website that should look good on phones and tablets.
When you want your site to load faster on mobile devices.
When you want to improve user experience for people using small screens.
When you want to make your website responsive and easy to read everywhere.
When you want to organize your CSS in a simple, logical way.
Syntax
CSS
@media (min-width: 600px) {
  /* styles for screens 600px and wider */
}
Start by writing CSS for small screens without media queries.
Use @media (min-width: ...) to add styles for larger screens.
Examples
This example sets basic styles for mobile first. Then it changes font size and background color for screens wider than 600 pixels.
CSS
/* Base styles for mobile */
body {
  font-size: 1rem;
  background-color: white;
}

/* Larger screens */
@media (min-width: 600px) {
  body {
    font-size: 1.2rem;
    background-color: lightgray;
  }
}
The button is smaller on mobile and bigger on tablets or desktops.
CSS
/* Mobile first button style */
button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

@media (min-width: 768px) {
  button {
    padding: 1rem 2rem;
    font-size: 1.25rem;
  }
}
Sample Program

This page uses the mobile-first approach. The base styles are for small screens. When the screen is at least 600 pixels wide, the styles inside the media query make the text bigger, add background color, and make the button larger.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mobile-first Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #ffffff;
      color: #333333;
      padding: 1rem;
      font-size: 1rem;
    }
    header {
      background-color: #007acc;
      color: white;
      padding: 1rem;
      text-align: center;
      border-radius: 0.5rem;
    }
    main {
      margin-top: 1rem;
    }
    button {
      background-color: #007acc;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      border-radius: 0.3rem;
      cursor: pointer;
    }
    button:hover {
      background-color: #005f99;
    }
    /* Larger screens styles */
    @media (min-width: 600px) {
      body {
        background-color: #f0f4f8;
        font-size: 1.125rem;
      }
      header {
        padding: 2rem;
        border-radius: 1rem;
      }
      button {
        padding: 1rem 2rem;
        font-size: 1.25rem;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to Mobile-first Site</h1>
  </header>
  <main>
    <p>This page looks good on phones first, then adjusts for bigger screens.</p>
    <button>Click Me</button>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always include the meta viewport tag in your HTML to make mobile styles work correctly.

Write your CSS starting with the smallest screen styles first, then add media queries for bigger screens.

Test your site on different devices or use browser DevTools to see how it looks on various screen sizes.

Summary

Mobile-first means start styling for small screens first.

Use @media (min-width: ...) to add styles for bigger screens.

This approach helps your site work well on phones and desktops.