@media screen and (min-width: 600px)
@media screen and (min-width: 900px)
If the media query is organized in the order above in the css file and the screen size is 950px, is the code of min-600 completely ignored?
Um...
First of all, since it's over 900, it's natural to run the code of min-900, and what I'm curious about is whether the code of min-600 is completely ignored or 600 is executed, but the choice that overlaps 600 and 900 is applied to 900, but not in 600!
css web
<style>
@media screen and (min-width: 600px) {
h1 {color:red;}
}
@media screen and (min-width: 900px) {
h1 {color:blue;}
}
</style>
<h1>test</h1>
900+ is blue
Between 600 and 900, red
Below 600 is not specified, so the default value is black.
If you adjust the horizontal length of the browser with your mouse, it will be reflected in real time.
And if it's over 900 horizontal, If you open the developer tool, you can see that the CSS applied to the 600 has been overridden. So if you override 600 CSS when it's 900 or higher, so if it's a CSS that's only in 600 and not in 900, there's nothing to override at 900, so 600 css will be exposed.
© 2024 OneMinuteCode. All rights reserved.