How to properly write styles for different resolutions?

Issue

I've got a design of a single page web site and it has 3 different styles depending on screen resolution: 425px, 768px and for a desktop, I assume it's 1024px+. I want to use media queries for different resolutions. What I don't understand is for what resolution should I write most of my CSS code, which would be kind of skeleton of the global style? And is it possible? So I have to change a few lines for other resolutions.

I've tried different media queries options like @media (min-width: 425px) and (max-width: 767px), but they either overlap or ignore other styles completely.

Solution

It is a basic confusion everyone had when one started responsive design. There is two way you can get started.

Using @media Max Width: First write all codes that applicable for desktop and above without any @media

Now add

@media only screen and (max-width: 1023px){
  /* Write codes that applicable for 768px design here */
}

Now add

@media only screen and (max-width: 767px){
  /* Write codes that applicable for 425px design here */
}

Write codes that applicable for 425px design here

Using @media Min Width: First write all codes that applicable for 425px and below without any @media

Now add

@media only screen and (min-width: 768px){
  /* Write codes that applicable for 768px design here */
}

Now add

@media only screen and (min-width: 1024px){
  /* Write codes that applicable for desktop design here */
}

Again you need to understand that you may have to add many other @media to make it run perfectly on every device

Answered By - Alivia Pramanik