Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html
sass
communitycreator

What are some CSS @media rules that fit all possible devices?

Youssef Zidan

This shot discusses experience with responsive design using CSS @media rules.

Before you begin to add responsiveness into your app, you have to ask yourself if you will design the app in the Mobile-First approach or the Desktop-First approach.

The Mobile-First approach designs or develops an app for mobile before designing for desktop, web, or any other device. The Desktop-First approach designs or develops an app for a desktop before designing for mobiles or any other device.

Following are the @media rules that I personally use to fit all possible devices and screen sizes.

Screen sizes from Chrome device toolbar.

The Desktop-First approach

/* ================ Desktop First ================ */

/* Any other bigger devices */
body {
  background: brown;
}
/* Ultra HD */
@media (max-width: 3840px) {
  body {
    background: red;
  }
}
/* Full HD */
@media (max-width: 2560px) {
  body {
    background: blue;
  }
}
/* Labtop L*/
@media (max-width: 1440px) {
  body {
    background: green;
  }
}
/* Labtop */
@media (max-width: 1024px) {
  body {
    background: cyan;
  }
}
/* Tablet */
@media (max-width: 768px) {
  body {
    background: purple;
  }
}
/* Mobile */
@media (max-width: 425px) {
  body {
    background: yellow;
  }
}

In Desktop-First, we use max-width and order the sizes from largestat the top to smallestat the bottom.

The Mobile-First approach

/* ================ Mobile First ================ */

/* Any other smaller devices */
body {
  background: brown;
}
/* Mobile */
@media (min-width: 425px) {
  body {
    background: yellow;
  }
}
/* Tablet */
@media (min-width: 768px) {
  body {
    background: purple;
  }
}
/* Labtop */
@media (min-width: 1024px) {
  body {
    background: cyan;
  }
}
/* Labtop L*/
@media (min-width: 1440px) {
  body {
    background: green;
  }
}
/* Full HD */
@media (min-width: 2560px) {
  body {
    background: blue;
  }
}

/* Ultra HD */
@media (min-width: 3840px) {
  body {
    background: red;
  }
}

In Mobile-First, we use min-width and order the sizes from smallestat the top to largestat the bottom.

RELATED TAGS

css
html
sass
communitycreator
RELATED COURSES

View all Courses

Keep Exploring