CSS @Media Rules that fits all possible devices.

#css #media #responsive #html

In this shot, I will share my experience with responsive design using css @media Rules.

Before you start adding responsiveness into your app, you have to ask yourself
"am I going to design the app in Mobile-First Approach or Desktop-First Approach?"

Mobile-First Approach is designing or developing an app for Mobile before designing for desktop web or any other device.

Desktop-First Approach is designing or developing an app for Dekstop before designing for Mobiles or any other device.

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

Sizes from Chrome device toolbar.

Desktop-first

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

With Desktop-first we use max-width and the order of the sizes from larger (at the top) to smaller (at the bottom).

Mobile-first

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

With mobile-first, we use min-width, and the order of the sizes from smaller (at the top) to larger (at the bottom).

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.