media query for the smallest screen not taking effect-CodePudding

I have the following three queries. My purpose is when screen width is 1200 or higher; screen between 800 and 1199 and any screen width below 800. the following code does not fire on any width below 800.

I have no additional CSS to overwride any style. the 400px width still takes the styles of between 800 and 1199 pixels block.

What am I doing wrong?

  @media screen and (min-width: 1200px) {
    
   }

@media screen and (min-width: 800px) and (max-width: 1199px) {
   
   
}

@media screen and (max-width: 799px) {

    
}

CodePudding user response：

`<!DOCTYPE html>
<html>
<head>
<style>
 

  @media screen and (min-width: 1200px) {
      body {
    background-color: red;
  }
   }

@media screen and (min-width: 800px) and (max-width: 1199px) {
     body {
    background-color: green;
  }
   
}

@media screen and (max-width: 799px) {

      body {
    background-color: blue;
  }
}
 
</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>

</body>
</html>`

CodePudding user response：

You either go (desktop-first) approach OR (mobile-first) approach. Don't mix both of them.

Desktop First:

div {background:yellow; height:200px; width:200px; border:2px solid #000;}

@media screen and (max-width: 1200px) {
  div {background:green;}
}

@media screen and (max-width: 800px) {
   div {background:blue;}   
}

@media screen and (max-width: 480px) {
  div {background:pink;}    
}

<div></div>

Mobile-First:

div {background:pink; height:200px; width:200px; border:2px solid #000;}

@media screen and (min-width: 480px) {
  div {background:blue;}    
}

@media screen and (min-width: 800px) {
   div {background:green;}   
}

@media screen and (min-width: 1200px) {
  div {background:yellow;}
}

<div></div>

Start describing CSS from one end (Either biggest-screen size) OR (Smallest screen-size) and go to the other end. Never try add min-width and max-width in same CSS defination. Its confusing and inappropriate.

Also, use something like @media screen and (min-width:520px) and (max-width:560px) when after all CSS you've written, only for certain width-zone, you specifically want to change something or add a unique CSS. Otherwise don't use the mix of (min-width) and (max-width) in same CSS code ever. That's not a good practise.

Go with flow in uni-direction, either from Wide-screens then keep using (max-widths) OR starting from 0px or smallest-mobiles and then keep using (min-width) to keep defining new CSS till you reach other end.