I wanted to know if the media queries has higher order for less or vise versa, because I format in a specific size works right, then I format for another screen the previous one stops working vise and versa, I wanted to know if it has a order
formatting for different screens, some do not work [duplicate]
0
asked by anonymous 04.07.2018 / 22:23
1 answer
2
The querys averages work in order of processing equal to the normal css codes.
Imagine that you have b{ text-align:center } on line 1 and another b{text-align:left} on line 20. What will be valid is line 20 because in processing order it comes later and overrides previous >. Keep this in mind.
I usually start the responsive with the bigger screen and I'm putting the rules of the smaller screens later to overwrite the larger ones.
Understanding this, you also have the ability to make the rules visible or not for a certain size, such as:
@media screen and (min-width: 768px) { a {color: yellow;} }
This rule would only make it visible for resolution smaller than 768px. Just like you can use max-width or both together.
Having these rules in view you can create your media querys in several ways.
You can also use this query media in the doc call
<link rel="stylesheet" href="estilo.css" media="screen and (max-width: 480px)">
04.07.2018 / 22:42