CODEWITHSUNDEEP
css
Prince
Prince

Reputation: 1192

What's the difference between @media screen and (max-width:770px) and @media screen and (max-width:770px + 30px)

I just got a project that I am supposed to work on. In the CSS file of this project, I found the following code:

@media screen and (max-width: 770px + 30px) {
    .rw-layout {
        margin: 10px;
    }
}

I tried to find out how it can affect the element .rw-layout but it is not working.

I tried to view in the developer tools of Firefox and no information as others:

enter image description here

So the question I am asking is that, what is the use of @media screen and (max-width:770px + 30px) in the project?

Upvotes: 0

Views: 200

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18639

That's invalid CSS and won't work in many (if any) browsers. If I had to guess how it happened, one possible scenario is perhaps he made a media query in a CSS preprocessor like Sass with variables - something like:

$tablet: 770px;
$pad: 30px;

@media screen and (max-width: $tablet + $pad) { }

But the variables ended up being transcluded instead of added up during compilation.

Either way, it's meaningless code the way it's currently written and will not execute - it doesn't mean 800px or 770px.

Upvotes: 1

Related Questions