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](https://developer.chrome.com/docs/devtools/device-mode/). 

#     
## The Desktop-First approach

``` css
/* ================ 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 #key# largest: at the top #key# to #key# smallest: at the bottom #key#.

<html>
 <head>
 </head>
 <body>
     <h1>Resize me to see the backgroud color changes </h1>
 </body>
</html>

/* ================ 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;
  }
}

codemirror

#      
## The Mobile-First approach

```css
/* ================ 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 #key# smallest: at the top #key# to #key# largest: at the bottom #key#.

/* 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;
  }
}

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

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. 