I've been stuck on the following problem for a while now.

@media screen and (min-width: 414px) and (max-width: 600px) {
  /* appropriate code */
}

@media screen and (min-width: 601px) and (max-width: 767px) {
  /* appropriate code */
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The issue I have is that when a screen is on the specific width of 767px, no styling is applied. What really confuses me is that on the other hand the specific width of 600px does work, while both are the max-width value of their respective media query. I have had this issue with other similar media queries but decided to simply provide you with those two to make my problem clear. I have tried out several things (verifying zoom value of browser, trying on different browser) but it doesn't seem to work. At first I thought it might be a bug but it's a recuring problem. Do any of you have an idea as to what might be the problem?

CodePudding user response：

It's working correctly on my side. But for more accuracy, you can use decimal values like so.

/*                    414 -> 413.7             600 -> 600.3             */
@media screen and (min-width: 413.7px) and (max-width: 600.3px) {
  div {
    color: red;
  }
}


/*                    601 -> 600.7             767 -> 767.3             */ 
@media screen and (min-width: 600.7px) and (max-width: 767.3px) {
  div {
    color: blue;
  }
}

<div>Hello</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

When min-width is used, it means the lowest width and styles are set for the higher width

When max-width is used, it means the maximum width and styles are set for the width less than that

When both are used, styles are applied when the width between the values is entered