Formwork for different screens, some do not work

Asked

Viewed 40 times

0

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 will format to another screen the previous fails to work vise and versa, I wonder if there is an order

css

  • @Anderson Carlos Woss my problem is another, my queries are totally different from the question duplicada I only specify max-width not min-width

  • Bruno edits his question and puts his complete CSS, which is more to give you a more accurate answer.

1 answer

2


The medias querys work in equal processing order to normal css codes.

Imagine you have one b{ text-align:center } in row 1 and another b{text-align:left} on line 20. What will count is the line 20 because in order of processing it comes after and override the previous one. Keep this in mind.

I usually start the responsive with the larger screen and I put the rules of the smaller screens later to overwrite the larger ones.

understanding this, it also has the feature of you leave the rules visible or not for certain size, as:

@media screen and (min-width: 768px) {  a {color: yellow;} }

this rule will only make visible for resolution less than 768px. Just as you can use max-width or both together.

With these rules in mind you can create your own midias querys in various possible ways.

you can also use this media query on the doc call

<link rel="stylesheet" href="estilo.css" media="screen and (max-width: 480px)">

  • there is some difference between @media (max-width:), @media screen and (max-width:), @media screen only (max-width:) ?

  • 1

    The media (max-width) is general, O screen is used for monitors or devices with colored screens in general, another possibility is the Print which is just for printing. And they’re not rendered on the screen. O only never used to be honest. I found this link that will be perfect for you: https://www.devmedia.com.br/utilizando-css-media-queries/27085

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.