hrgui
9/16/2022

What does it mean to be mobile first?

The scenario

  1. We want a red background in mobile.
  2. We want a green background in tablet and desktop.

Is this mobile-first?

body {
  background: green;
}

// This applies from 0px to 480px
@media (max-width: 480px) {
  body {
    background: red;
  }
}

No.

Is this mobile-first?

body {
  background: red;
}

// This applies from 480px onwards
@media (min-width: 480px) {
  body {
    background: green;
  }
}

Yes.

Conclusion

Developers often code desktop-first rather than mobile-first.

I was like that until I learned tailwindcss.

hrgui

Harman Goei (hrgui) is a developer that loves to make cool and awesome web applications. His strength is in HTML, CSS, JavaScript, but he is willing to code anywhere in the stack to make the web be awesome.

© 2024 Harman Goei