CSS3: help with @media screen and

Question

css

Help me figure out all these CSS3 chips. In particular, with priorities and what affects what.

So, if I filed a style.css file like this:

just_properties

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

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

@media print {
properties_print
}

Then it’s as if I initially set simple_properties for everyone , BUT if it suddenly turns out that we have a minimum device width of more than 300px, then properties_300 are also taken into account , and if different values ​​\u200b\u200bare assigned to the same variables, then the priority is for properties_300 because it is written below (greater than No. lines).

And if it suddenly turns out that our device has more than 800px in width of its screen, then I will “uncomment”, properties_800 will also “appear” and they will be taken into account, as they go below.

Am I understanding everything correctly?

Answer 1

Specify like this:

@media screen and (min-width: 320px) and (max-width:480px) {
}

Answer 2

You are just overriding the values. Tobish, any value assignment overwrites the previous one (and in general, all properties have a default value). Tobish, if you have different selectors in different media sections, then the last applied value will be for this property. Everything is simple here.
But more fun with selector priorities.