Media in CSS are not working with max width [duplicate] - css

Question

This question already has answers here:
Why does the order of media queries matter in CSS?
(2 answers)
Closed 2 years ago.
I;m trying media query in scss but is not working. I have code like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
background: red;
}
#media (min-width: 460px) {
body {
background: yellow;
}
}
#media (max-width: 459px) {
body {
background: black;
}
}
</style>
now no media query is working for width 459px and background is red... (black is on max 458 and yellow on 460)
but when I changed to
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
background: red;
}
#media (min-width: 460px) {
body {
background: yellow;
}
}
#media (max-width: 460px) {
body {
background: black;
}
}
</style>
then black background is working for 459px but on 460px two media queries are working...
how to fix that on max-width I will have only black background and on min-width only yellow?

Answer 1

I would do it differently: Define a general rule first and then one media query for smaller screens, like this:
body {
background: yellow;
}
#media (max-width: 460px) {
body {
background: black;
}
}
Or the other way round, using a mobile-first approach:
body {
background: black;
}
#media (min-width: 460px) {
body {
background: yellow;
}
}
Both ways there is certainly no width where two seetings would collide, and no width where no setting would apply at all.